javascript - Best practice for instant claim of a page by Service Worker -

i have service worker set claim page immediately, due nature of application , user experience.

as application converting on appcache, had dynamic manifest file created each user, found best method parse manifest file json array , send service worker in order cache it. problem being need wait until service worker active before can receive array.

i have set timeout on function 10000 (see below), success rate not 100%. edit: find service worker not activated before end of 10000 timeout resulting in error: "typeerror: navigator.serviceworker.controller null".

//get request - service worker preperation  settimeout(function getrequest() {   console.log("app: enetered getrequest() method");   $.ajax({     type : "get",     url : "https://exampleurl/app/" +      localstorage.getitem("user") + ".manifest",     contenttype: "text/plain",     async : false,     success : function(response) {         var myarray = listtoarray(response, '\n');          send_message_to_sw(myarray);     },     error : function(msg) {         console.log("error: " + msg);      }     }); }, 10000); 

my question best practice checking if service worker active, or should increase amount of time in timeout?

i attaching relevant service worker code below incase there problem way have set immediate claim.

// install self.addeventlistener('install', function(event) {   console.log('[serviceworker] installed version', version);   event.waituntil(     caches.open(version).then(function(cache) {         console.log('[serviceworker] cached cachedfiles for', version);          return cache.addall(cachefiles);      }).then(function() {        console.log('[serviceworker] skip waiting on install');       return self.skipwaiting();     })   ); });    //activate  self.addeventlistener('activate', function(event) {    self.clients.matchall({     includeuncontrolled: true   }).then(function(clientlist) {     var urls = clientlist.map(function(client) {       return client.url;     });     console.log('[serviceworker] matching clients:', urls.join(', '));   });    event.waituntil(      caches.keys().then(function(cachenames) {       return promise.all(         cachenames.map(function(cachename) {           if (cachename !== version) {             console.log('[serviceworker] deleting old cache:', cachename);             return caches.delete(cachename);           }         })       );     }).then(function() {         console.log('[serviceworker] claiming clients version', version);       return self.clients.claim();     })   ); });   //recieve data javascript file self.addeventlistener('message', function(event){   console.log("sw received message: " + event.data);   var fullarray = [];    var che = event.data;   fullarray = che.splice(',');   console.log("swche2: " + fullarray);   var result = fullarray.slice(1,-1);     caches.open(version + 'manifest')   .then(function(cache) {     return cache.addall(result);  }); }); 

navigator.serviceworker.ready promise client pages can wait on, , resolve when there's active service worker scope encompasses current page.

navigator.serviceworker.ready.then(registration => {   // something, confident registration corresponds   // active sw's registration. }); 

but... 2 things.

• you can add items using cache storage api context of page, without having send message service worker. window.caches.open('my-cache-name') give access same cache service worker can use.

• if you've got set of resources need cached, you're better off caching them inside of install handler. ensures service worker won't finish installation unless required files cached. can use fetch() inside of install handler retrieve json manifest of resources need precached, , indexeddb (instead of localstorage, isn't exposed service workers) store name of current user. make sure if go route, make use of event.waituntil() delay install handler's completion until full set of operations successful.