React-js service worker cache issue

Question

We have offline-plugin installed in reactjs app which used service-worker to cache build files,which didn't check any update on new build and because of this now user with old build are still accessing old site with cached data in service-worker.These files had no expiry set so i am wondering if there can be any solution to force user to refresh the page or push the update to the user?

I have updated in new build with no-cache header and auto update for offline plugin but i am still not able to find a way to push this update to old files user

yagiro yagiro · Accepted Answer · 2019-02-09T14:45:29

I am not familiar with offline-plugin but I do have a solution in mind.

The browser fetches your ServiceWorker file everytime it loads your app.

If the fetched ServiceWorker file is different than the one it had before, it will basically replace the old one with the new one (but this process is a bit more complex, and will not happen on the initial load of the new ServiceWorker [Description of the update process can be found here]).

So basically what you can do is change the ServiceWorker file, and add code to it that will delete the old caches on it's activation. Like so:

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
            return caches.delete(cacheName);
        })
      );
    })
  );
});

You can find further information on ServiceWorkers here.

React-js service worker cache issue

1 Answers