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);
