javascript - How: ServiceWorker check if ready to update -

what trying achieve:

• render page loader/spinner

• if service-worker.js registered , active, check updates

  • if no updates, remove loader
  • if updatefound , new version installed, reload page
• else register service-worker.js
  • when updatefound, meaning new 1 installed, remove loader

i using sw-precache module me generate service-worker.js , following registration code:

window.addeventlistener('load', function() {    // show loader   addloader();    navigator.serviceworker.register('service-worker.js')     .then(function(swregistration) {        // react changes in `service-worker.js`       swregistration.onupdatefound = function() {         var installingworker = swregistration.installing;         installingworker.onstatechange = function() {           if(installingworker.state === 'installed' && navigator.serviceworker.controller){              // updated content installed             window.location.reload();           } else if (installingworker.state === 'installed'){              // new sw registered , content cached             removeloader();           }         };       }        if(swregistration.active){         // here know `service-worker.js` installed         // not sure there changes         // if there no changes last thing can check         // afaik no events fired afterwards       }      })     .catch(function(e) {       console.error('error during service worker registration:', e);     }); }); 

after reading spec clear there no handlers updatenotfound. looks serviceworker.register checks if service-worker.js changed internally running get-newest-worker-algorithm, cannot see similar methods exposed via public api.

i think options are:

• wait couple of seconds after service worker registration becomes active see if onupdatefound fired
• fire custom events service-worker.js code if cache not updated

any other suggestions?

---

edit:

i've came code solves issue using postmessage() between sw registration , sw client (as @pate suggested)

following demo tries achieve checks through postmessage between sw client , sw registration, fails sw code cached demo

---

edit:

so looks cannot implement want because:

1. when service worker active cannot check updates evaluating code in sw - still same cached sw, no changes there
2. you need wait onupdatefound, there nothing else notify of changes in sw
3. activation of older sw comes before onupdatefound
4. if there no change, nothing fires after activation
5. sw registration update() immature, keeps changing, starting chrome 46, update() returns promise resolves 'undefined' if operation completed or there no update
6. setting timeout postpone view rendering suboptimal there no clear answer how long should set to, depends on sw size well

the other answer, provided fabio, doesn't work. service worker script has no access dom. it's not possible remove dom or, instance, manipulate data handling dom elements inside service worker. script runs separately no shared state.

what can do, though, send messages between actual page-running js , service worker. i'm not sure if best possible way op asking can used achieve it.

1. register onmessage handler on page
2. send message sw's activate or install event page
3. act accordingly when message received on page

i have myself kept sw version number in variable inside sw. sw has posted version number page , page has stored localstorage of browser. next time page loaded sw posts current version number page , onmessage handler compares stored version number. if not same, sw has been updated version number included in mssage. after i've updated localstorage copy of version number , done , that.

this flow done in other way around: send message page sw , let sw answer back, act accordingly.

i hope able explain thoughts :)