Service Worker lifecycle

Getting started with Progressive Web Apps (PWAs)? Here's a succinct explanation of the service worker (SW) lifecycle and update process.

SW lifecycle:

1. The SW is registered with
   

    if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register("/serviceworker.js");
    }
   

2. The browser attempts to download and parse the SW file as JavaScript.

3. If it succeeds the install event is fired (it only fires once). The SW is now installed but not yet in control of its clients like the PWA.

4. By default, the SW will not take control until the next time you navigate to the page by reloading it or re-opening the PWA.

Updating a SW

You can find all the details here and can be summarized like this:

1. Browser detects that the SW currently controlling the client and the new (from the server) version of the same file are byte-different.
2. After the new SW is installed it will wait to activate until the old SW no longer controls any clients. This way only 1 version of the SW runs at a time. Refreshing the page or reopening the PWA won't make the new SW take control.
3. The user closes or navigates away from all tabs and windows using the curernt SW and then navigates back. The new SW takes control.