javascript - Service Worker reload page on cache update - Stack Overflow

admin管理员组

文章数量:1355555

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:

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

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:

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

• javascript
• web-worker
• service-worker
• offline-caching

Share Improve this question Follow edited Jan 9, 2017 at 10:30 Avi Zloof asked Jan 6, 2017 at 9:42 Avi ZloofAvi Zloof 2,97355 gold badges2525 silver badges2828 bronze badges 2

• no enough details. by the way you can use onmessage event when you have result from webworker you can show an alert on click of alert reload the page – Muhammad Asif Javed Commented Jan 6, 2017 at 9:46
• Hi I have updated the description. – Avi Zloof Commented Jan 7, 2017 at 20:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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.

本文标签： javascriptService Worker reload page on cache updateStack Overflow