11

I have an app that registers service worker to make the app available offline. Now I need to move the app to a new server, so I set up a 301 redirect for the root page. But existing caches seem to ignore this and always serve the old app on the old URL. How do I force them to update?

4 Answers 4

1

Another simple way to do that is by using workbox-window. you can detect new service workers installation and prompt user to reload the page or reload it without user permission. for more detail please read this.

I hope this can help you.

1
  • This seems a little different - for me, the core problem was that I removed all files from the original server, including the service worker itself, so it was unable to fetch it and proceeded to work in offline mode.
    – riv
    Aug 5, 2019 at 10:51
0

Found this: https://github.com/NekR/self-destroying-sw

After refreshing and re-opening the page, it finally picked up the redirect.

0

You can update service worker code with:

ServiceWorkerRegistration.update();

Here there are a example: example

Note: The update code run when there are diffs with the serviceworker intalled in the browser, in this instance de new service worker run the updates but the new code don't are avalible until the website close and open again.

2
  • Where would I put it? There was literally nothing left on my original server except a .htaccess with redirect. The best way seems to add a service worker file that unregisters itself, since that's the first thing that will be loaded on a subsequent visit.
    – riv
    Aug 2, 2019 at 22:29
  • Yes, you need to put an index page in your server and in this page load the updates for your service worker and then do the redirect by js. Aug 16, 2019 at 19:37
0

If you don't want to wait forever for someone to clear cache or kill their service worker you can detect a redirect.

I've described details here: https://enux.pl/article/en/2022-05-26/pwa-detecting-redirects-service-workers

In short: It is not possible to get a URL of a redirect. Heck you will not even get a status number if the new URL would brake CORS. So what you have to do is use a redirect option:

var urlForTestingRedirs = '/something/local.css';
fetch(urlForTestingRedirs, {
    // this is crucial
    redirect: 'manual',
    // use head to be lite
    method: 'HEAD',
    // make sure HTTP cache is skipped
    cache: 'no-cache',
}).then(function(response) {
    if (response.type == 'opaqueredirect') {
        clearAllForPwa()
    }   
});

You can just do it in a standard script tag. So no need to do this fetch in your sw.js or anything like that.

Note that clearAllForPwa function will heavily depend on what caches are you using. So what Web Storage API do you use (if any) or maybe you use IndexDB with e.g. localforage... Whatever is the case it is nice to clean up after yourself 😉

Again, see more information in the article I mentioned above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.