I have been researching the topic for several days now and have yet to find a pure js solution that works. After clearing the browser cache (cache busting), is there a way in JS / React to reload the page with the new version?
At the moment, after clearing the cache the users have to close the browser and visit the site again before they can see the new version... as the cache is only cleared after it is already loaded. Manually refreshing the page does not work either - the browser must be closed.
I have seen several suggestions to use window.location.reload(true), but that does not seem to work anymore on modern browsers.
I would prefer to be able to do it purely on the client side, if possible.
Thanks in advance.
When you register service worker in index.js file.
serviceWorkerRegistration.register();
The service worker starts working. But based on a problem, it can not activate itself. :)
To solve this problem, you can overwrite the service-worker.js file .
Instead of this code
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
You can follow this method
self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));