Description
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 :)