workbox cache versioning best practice

Question

i need to "purge" or "invalidate" Workbox SW cache after every release.

that's what i plan to do (dummy version of course), but i haven't enough experience to understand if this is the correct approach:

importScripts(...);

const version = 1;
const workboxSW = new WorkboxSW();

workboxSW.router.registerRoute(/\.(?:png|gif|jpg|svg|json|js|css|woff|mp3)$/,
    workbox.strategies.cacheFirst({
        cacheName: 'static-cache-' + version
    })
);

and increase version at every release :) should i purge every file form the previous versions? there are different approach for that?

tnx for the feedback

Divestiture

Answer 1

This makes sense to me, but you should make sure that when the activate event occurs, your clear any old caches you don't need.

A very basic approach (assuming you are ok with completely clearing the cache) is to wipe any caches that currently exist).

// Clean up caches in activate event to ensure no pages
// are using the old caches.
self.addEventListener('activate', (event) => {
  const promiseChain = caches.keys()
  .then((cacheNames) => {
    // Step through each cache name and delete it 
    return Promise.all(
      cacheNames.map((cacheName) => caches.delete(cacheName))
    );
  });

  // Keep the service worker alive until all caches are deleted.
  event.waitUntil(promiseChain);
});

You might want to be smarter with this logic (i.e. check for version number or only delete cache names you are aware of).

Savill

Could you please indicate where/how to use this code. What is 'self' in this situation? Thanks. – Hotspur

In a service worker JS file. Self is used in JavaScript workers to reference the global context. In this case, I often think of self as referring to the service worker itself, similar to how you have window for referring to a browser window / tab. – Savill

Answer 2

If you'd like to go with a cache-first strategy, then I'd recommend integrating Workbox into your build process and using its built-in support for generating a "precache manifest". This manifest will ensure that your precached files are kept up to date each time you redeploy your web app.

There are some guides for getting started with build-time integration at https://developers.google.com/web/tools/workbox/#get_started

If you choose not to do that, then I'd suggest not using a cache-first strategy, and instead using something like network-first.

Bosco

unfortunately i can't generate a manifest, the page load file based on type, and then the game engine, load images based on a config. So there will be quite a few variables, and i can't add them all to precache, or to open a single game, you'll have to download all the resource for all games the fist time. Using network-first make workbox quite useless :( i plan to use it as a local cache, not for an offline helper – Divestiture