Workbox unable to update user's previously cached data

Question

I believe I set up my service worker incorrectly from the get-go, and now I'm having trouble resetting everything. My problem now is that the only way for users to fix the issue is to manually unregister the service worker and cached files, which isn't very helpful. I've added a script in web pack to unregister the service worker and delete the cached storage files, however since the bundle file is cached anyways by the user's browser, they cannot even see the changes that I make to the file, so they are stuck with old code.

I've tried everything I could think of and starting to exhaust resources, but it seems like I can't do a whole lot for the user agent since they keep receiving old files, and are unable to even see these new changes.

Also, I added cache busting which I thought would fix this issue, however, it did not.

Any suggestions?

Answer 1

Unregistering your service worker should be unnecessary. You should be able to just deploy a new SW and your users will wills start getting that.

See this answer about SW updates. Basically anytime a user visits your site the SW will be fetched fresh if the current version the browser has is 24 hours old.

In the new version of your SW, change the prefix or suffix and workbox will switch to a fresh cache and ignore all of the existing cached assets.

You'll probably also want to cleanup the old cache with something like this:

const suffix = 'v1';
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
      .then(keys => keys.filter(key => !key.endsWith(suffix)))
      .then(keys => Promise.all(keys.map(key => caches.delete(key))))
  );
});