Service Worker expiration

Question

Once the Service Worker is installed, how long does it take for Chrome browser to check for a newer version of it? When does current client-side service worker expire usually?

I'm trying to figure out best practice for developing with Service Workers and pushing changes to prod. Currently, once there is a change implemented on how Service Worker behaves, clients are not always picking that up if a previous Service Worker has already been installed.

This question is also somewhat relevant: Programmatically update service worker - ideally once a change is implemented to SW you'd want to force update it on all clients that might already have previous version of it.

Answer 1

Careful reading of the MDN document provided an answer:

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Updating_your_service_worker

If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.

Answer 2

I have been testing Service Worker on a Chrome Computer and Chrome Android Phone.

The result is:

• One thing is the Service Worker and it's state.

• The other thing is the typical caching problem when updating files as html, js, etc. on a production server.

First of all I was confused because I thought that the mix between Service Worker + caching problem is just a big mess.

What I have seen is that if I change a .js file, the navigator doesn't catch it. So the way I solve it is using versions over the script call:

<script src="jquery-functions.js?ver=1.54"></script>

Every time you change code inside a file, make sure you increment the versión (in my case: ver=1.55)

This just works on Computer and Android, and Server Worker doesn't interfere at all. It works identically for the web version and the webApp version.

The other problem is how to change or update the service worker itself. The first thig I tried is to remove the script call to the service worker file. This doesn't remove the service worker.

I looked for the code to remove service workers and this seems to work properly on Chrome Computer and Chrome for Android.

// REMOVE ALL SERVICE WORKERS
navigator.serviceWorker.getRegistrations().then(
    function(registrations) {
        for(let registration of registrations) {
            registration.unregister();
        }
});

// AND REMOVE ALL CACHES 
caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

On Computer: Once this code is applied without the service worker script, it still runs but with this console message: domain.name - deleted. After a second reload, the status of the service worker has this message: '# Status is redundant'. (This seems ok; the Service worker has been removed)

If I run again the service worker, if I scroll down on the chrome console I can see another service worker running; so it seems to work properly; this is the way to kill Service Workers and to Wake them up.

On Android Phone when starting the webApp Home Screen icon: The first time it opens as always: It seems that the service worker continue working properly. (the behavior is the same as Chrome Computer)

The second time I try to open the webApp Home Screen icon with the "Airplane mode" (to test the functionality of service worker) I get the typical error of the navigator when there's no internet connection. I understand that this behavior is correct because the Service worker has been killed.

I think that this is the first step to feel a bit confident with Service Workers but please send me your feed back I you have more information or testing.

It's important that you use the Chrome Console with the TAB of "Application" -> "Service Workers" so you can see what's happening behind.

As a little bonus, when the user doesn't have an internet connection, it's nice to inform the user that it woun't be possible to save the changes. That's the simple way I have done it:

setInterval(() => {
    if (!navigator.onLine) { niceAlert("No Internet connection detected. Your changes will not be saved"); }
},5000);

Answer 3

By default service workers expires after 24 hours. But the best approach is to use max-age = 0 header. Because we want our changes to reflect as soon as possible.I don't know about force updating but when their is no caching of service worker file and no tab is open for previous service worker then the new service worker will install automatically.

refer to this link for more info https://jakearchibald.com/2016/caching-best-practices/