Old service worker caching previous website

Question

I had an old website built in Gatsby which used gatsby-plugin-offline to cache the page via a service worker. I have created a new site (in NextJS) which is now deployed to the same URL via Netlify.

Some users, when trying to visit the site, instead see a blank screen with errors. These errors are shown in the console:

This is due to the gatsby-plugin-offline service worker serving a cached version of the old website:

If I redeploy the old site, it displays correctly (as the assets that the cached site is looking for are now available), however, it doesn't show the latest version, only the old cached version.

This means that even if I update the sw.js script to remove any service workers (via gatsby-plugin-remove-serviceworker or otherwise) the new version of the script isn't picked up.

I've also tried adding this sw.js script to the root of my NextJS app (in /public), but again it isn't being picked up.

Affected users can see the new sw.js script by visiting /sw.js in their browser, but alas when visiting the website it isn't being picked up.

I've also also tried adding this to my netlify.toml, again to no avail

[[headers]]
  for = "/sw.js"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

Doing a hard refresh shows the correct site, but then doing a regular refresh shows the old site again.

Obviously I can remove the service worker on my machine in dev-tools, but this doesn't help all users in the wild experiencing this problem.

DevTools say the service worker was received in June, will it ever just die of natural causes?

So the crux of the issue us:

• There's a zombie service worker serving an old version of a page
• Can't run updated SW code, as the same cached page is being served every time
• How can I ensure users are seeing the latest page, and not the old cached version

I'm really at my wits ends here. Any suggestions would be greatly appreciated.