The Service Worker Lifecycle

1. 1
   register()

   The page asks the browser to create or update a registration for a script and a scope. Returns immediately; control is not implied.

   fails by Insecure context, wrong MIME type, a 404 on the script, or a scope wider than the script's directory with no Service-Worker-Allowed header.

2. 2
   install

   The worker script is evaluated and the install event fires. waitUntil() holds it here while a precache fills.

   fails by One 404 inside cache.addAll() rejects the whole promise and the worker is discarded — silently, from the page's point of view.

3. 3
   waiting

   The worker is installed and idle because an older worker still controls at least one client. Nothing else happens until they all go.

   fails by A pinned tab. The new build waits indefinitely and no server-side signal will tell you.

4. 4
   activate

   Fires once no old clients remain. The only safe moment to delete previous caches. clients.claim() here takes over existing documents.

   fails by Deleting a cache the app still needs, or a long waitUntil() that delays the first controlled fetch.

5. 5
   fetch

   Every request in scope now passes through your handler, including the navigation request for the page itself (Intercepting Fetch).

   fails by A handler that throws produces a network error for a request that would otherwise have worked.

6. 6
   update

   On navigation, on a periodic check, or on registration.update(), the browser re-fetches the script and byte-compares it. Different bytes restart the cycle.

   fails by HTTP caching on the worker script itself, which can freeze an origin on one worker version.

Read the failure column as an incident list. Every one of these has taken a real site down for returning users.

1const VERSION = 'shell-v7'
2const SHELL = ['/', '/offline.html', '/app.css', '/app.js']
3 
4self.addEventListener('install', (event) => {
5  // waitUntil keeps the worker in `installing` until this settles.
6  event.waitUntil(
7    caches.open(VERSION).then((cache) => cache.addAll(SHELL)),
8  )
9  // NO skipWaiting() here unless you also reload the page. See below.
10})
11 
12self.addEventListener('activate', (event) => {
13  event.waitUntil((async () => {
14    // Safe *only* here: no old client is still reading these.
15    const keys = await caches.keys()
16    await Promise.all(
17      keys.filter((k) => k !== VERSION).map((k) => caches.delete(k)),
18    )
19    // Optional: take over documents that are already open.
20    await self.clients.claim()
21  })())
22})

addAll is atomic: one 404 in SHELL rejects the promise, the install fails, and the site quietly has no offline story. Generate that list from the build, never by hand.

• User navigates; browser re-fetches worker script — Update checks are tied to navigation and a browser-chosen periodic check, not to your deploy.
• waiting — The whole lesson. Length is set by the user closing their last tab, not by anything you deployed.

Nothing on this timeline is under your control after the first row. That is the honest shape of a service worker rollout.