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 :)


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj...
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer ...
Read more

c# - Asp.net web api : redirect unauthorized requst to forbidden page -

im trying redirect unauthorized request forbidden page instead i'm getting forbidden page in response body , how can fix ? here's startup class : app.createperowincontext(storecontext.create); app.createperowincontext<applicationusermanager>(applicationusermanager.create); app.createperowincontext<applicationsigninmanager>(applicationsigninmanager.create); app.usecookieauthentication(new cookieauthenticationoptions { authenticationtype = defaultauthenticationtypes.applicationcookie, expiretimespan = timespan.fromdays(30), }); app.useexternalsignincookie(defaultauthenticationtypes.externalcookie); app.usetwofactorsignincookie(defaultauthenticationtypes.twofactorcookie, timespan.fromminutes(5)); app.usetwofactorrememberbrowsercookie(defaultauthenticationtypes.twofactorrememberbrowsercookie); the method im trying reach : [httpget] [authorize(roles = "admin")] public string getcurrentusername() { return userman...
Read more