[PWA] 10. Trigger a version update

Posted 2020-07-06 Answer1215

When the refersh button is clicked, we need to tell the waiting service worker to replace the current service worker right away. Then we refresh the page load the latest cache from the new cache db. 

 

There are three new components to help:

Service worker can all skipwaiting() while it is "waiting" or "installing".

self.skipWaiting()

Then the waiting service worker should take over right away.

So we want to call it function when user click refresh button in the notification.

 

Then how can we send the signal from our page to waiting servcie worker?

// from a page:
reg.installing.postMessage({foo: ‘bar‘});

// in the service worker:
self.addEventListener(‘message‘, function(event){
    event.data; // {foo: ‘bar‘}
})

 

The page gets event when the value chanages, means a new service worker take over, we will use this as a signal to reload our page:

navigator.serviceWorker.addEventListener(‘controllerchange‘, function(){
    // navigator.serviceWorker.controller has changed
})

 

--------------------------------------------------------

Our page: send single to service worker ask it to reload:

IndexController.prototype._updateReady = function(worker) {
  var toast = this._toastsView.show("New version available", {
    buttons: [‘refresh‘, ‘dismiss‘]
  });

  toast.answer.then(function(answer) {
    if (answer != ‘refresh‘){
      // tell the service worker to skipWaiting
      worker.postMessage({message: ‘skipWaiting‘})
    }

  });
};

 

Service worker: listen to the message event and call skilWaiting():

// TODO: listen for the "message" event, and call
// skipWaiting if you get the appropriate message
self.addEventListener(‘message‘, function(event){
    if(event.data.message == "skipWaiting"){
        self.skipWaiting();
    }
})

 

The on our page, listen to controllerchange event, insdie load the page:

IndexController.prototype._registerServiceWorker = function() {
  if (!navigator.serviceWorker) return;

  var indexController = this;

  navigator.serviceWorker.register(‘/sw.js‘).then(function(reg) {
    if (!navigator.serviceWorker.controller) {
      return;
    }

    if (reg.waiting) {
      indexController._updateReady(reg.waiting);
      return;
    }

    if (reg.installing) {
      indexController._trackInstalling(reg.installing);
      return;
    }

    reg.addEventListener(‘updatefound‘, function() {
      indexController._trackInstalling(reg.installing);
    });

    // TODO: listen for the controlling service worker changing
    // and reload the page
    navigator.serviceWorker.addEventListener(‘controllerchange‘, function(){
      window.location.reload();
    })
  });
};