Expire create-react-app service worker cache from users browsers

Question

I had previously created a website for my band on thescratch.ie using create-react-app and hosted this using S3 and Cloudfront. I recently replaced the react site using Shopify instead and thescratch.ie domain now points to Shopify.

For new users to the site, everything works fine but old users continue to see a broken cached version of the react website, not a Shopify site. I had assumed that the cache would eventually expire for these users, but it's been like this for a couple of months now.

Looking at the Chrome dev tools network panel I notice a couple of things:

• Almost everything is being served from cache - the index.html and main.js return a 200 and have a size of (service worker)
• Images return a 404
• The manifest.json returns a 404

I'm wondering if there's a way to expire the service worker cache? Is it possible to do this by hosting a new manifest.json file on Shopify?

Thanks in advance.

Answer 1

I ran into the same issue in a combination of CRA & Gatsby. Found this Gatsby plugin which helped me.

The underlying article maybe also can help you.

tl;dr in my understanding you need to place a service-worker.js in the root directory containing the code to unregister the old service worker.