Service worker: delete index.html from cache in onupdatefound event

Is your proposal related to a problem?

When the service worker in registerServiceWorker.(js|ts ) is enabled it provides very useful PWA benefits.

However, in a production build it also caches the index.html file which references the names & hashes of the outputted JS chunks by the webpack build. When a new build is created, new chunks and hashes are generated, however, the service worker at the client keeps the old index.html and looks for the old chunks, which completely breaks the app as no JS can be obtained.

Describe the solution you’d like

The registration of the service worker in registerServiceWorker.ts already detects new content available from the server and logs a prompt to refresh in the console. In the onupdatefound event here there is an assumption that old content has been purged, when in fact even after closing all tabs and hard reloading I keep seeing this message and when I check the cache in DevTools and the network I see it’s coming from the service worker. Other issues can be found here #7121 #4674 #5316 which can’t get past this issue as well.

At the event handler as well as the console log of New content is available; please refresh., it would be better if index.html is manually deleted from the cache using the Cache API, the cache key seems to be in the form of workbox-precache-https://mysite.io/.

Describe alternatives you’ve considered

Turning the service worker off takes away a lot of benefits and PWA functionality, so it’s not really an option as proposed in other issues related to this.

Many thanks 😃

[tobias-tengler]

This issue should be high priority IMO. All it takes is for a developer to include serviceWorker.register();, deploying that version, people visiting that version of the site, pushing a new update and now the app is broken for everyone that previously visited that site. Seems like something really bad! And the worst part: afaik the serviceWorker can’t be easily disabled for people that are already affected by this.

[mexmirror]

Our project is currently affected by this as well. Wouldn’t it be a good default implementation if this was enabled by default? Correct me if I am wrong, but when we deploy the application, the bundler creates new bundle names which will break any cached index.html.