javascript - Priming a runtime service worker cache using Workbox -

how use below code in workboxsw register routes per-caching urls. per-cached urls includes ajax go server also!

$.ajax({    url : '/myapi/records',    type : 'get',    datatype:'json',    success : function(data) {                    alert('records: '+data);       //build urls array records details        var urls = [];      urls.push('/myapi/records')      $(data).each(function (index) {         urls.push('/myapi/records/' + data[index].id + '/data')        });       //add urls cache      var requests = urls.map(url => new request(url));      caches.open('my-cache').then(cache => {      return cache.addall(requests).then(() => {         // @ point, `cache` populated `response` objects,         // , `requests` contains `request` objects used.      }).catch(error => console.error(`oops! ${error}`));   }); }, error : function(request,error) {     alert("request: "+json.stringify(request)); } }); 

workbox's precaching relies on having access local file representing resource @ build time. allows generate hash of each resource managing (based on local file's contents) , keep cached resource date whenever local file changes.

what you're suggestion sounds more workbox's support handling routes via runtime caching. can configure via like:

// replace actual api endpoint. const api_url = 'https://my-api-server.com/api/restendpoint';  // use whichever strategy you'd prefer: networkfirst, stalewhilerevalidate, etc. const apicallhandler = workboxsw.strategies.networkfirst({   cachename: 'my-api' });  workboxsw.registerroute(   api_url,   apicallhandler ); 

this result in responses https://my-api-server.com being added cache named my-api @ runtime, after make first request. (in particular case, using networkfirst strategy, cached responses used if network unavailable.)

if you're not okay runtime cache starting out "cold" , feel needs primed, writing own install event handler alongside workbox code:

// existing workboxsw code goes here.  self.addeventlistener('install', event => {   event.waituntil(     caches.open('my-api')       .then(cache => cache.add(api_url))   ); });