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

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).