CODEWITHSUNDEEP
javascriptweb-workerservice-workeroffline-caching
Avi Zloof
Avi Zloof

Reputation: 2973

Service Worker reload page on cache update

I am using React+Service Worker+offline-plugin to create a Service Workerwith persistent caching for the website.

I want to tell the user when a new version is stored in cach and suggest to refresh the page but I don't know how to reference the Service Workerand what event I should listen to (Service Workeris created automatically by npm "offline-plugin").

Standard flow today:

  1. Webmaster publish a site (V1)
  2. User visits the website
  3. He sees the website (V1) while Service Worker stores pages in persistent cache
  4. Webmaster publishes a new version (V2)
  5. User revisits the site seeing old version from persistent cache while web worker loading new version in the background (V2).
  6. When the user will refresh the page he will see website version 2

New flow should be:

  1. V2 loaded done in the background
  2. A popup message tels the user to refresh the page to get the new version.

Upvotes: 6

Views: 6456

Answers (2)

Rubinsh
Rubinsh

Reputation: 4993

You should look at the following link: Service Worker life cycle - updates

You can also update your service worker manually by running something like: 

navigator.serviceWorker.register('/sw.js').then((reg) => {  
  // sometime later…     
  reg.update(); 
});

You can tell that you have a new version ready (and not yet activated) on the Service Worker's install event.
You know that you have a new version loaded in the handler of the service worker's activate event.

Upvotes: 1

Hosar
Hosar

Reputation: 5292

Service worker is a specialized form of a webworker.
When you registry a sw, like for example in serviceWorkerRegistry.js, you'll have access to several events.
e.g.

serviceWorkerRegistry.js:

if (!navigator.serviceWorker) return;

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

    if (reg.waiting) {
      console.log("inside reg.waiting");
      return;
    }

    if (reg.installing) {
      console.log("inside reg.installing");
      return;
    }

    reg.addEventListener('updatefound', function() {
      console.log("inside updatefound");
      let worker = reg.installing;
      worker.addEventListener('statechange', function() {

        if (worker.state == 'installed') {
          console.log('Is installed');
          // Here you can notify the user, that a new version exist.
              // Show a toast view, asking the user to upgrade.
              // The user accepts.
              // Send a message to the sw, to skip wating.
              worker.postMessage({action: 'skipWaiting'});

        }
      });
    });
  });

sw.js:
// You need to listen for a messages
self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

Now the problem with offline plugin, is that it creates the sw for you, and in that way is harder to understand what the sw is doing.
I would say, it's better to create your own sw, this way you can understand better the functionality. this plugin can help you with the cache.

Upvotes: 5

Related Questions