Lifecycle stages

Event log

// sw.js - cache-first service worker template
const CACHE = "app-v1";
const SHELL = ["/", "/styles.css", "/app.js", "/logo.png"];

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE).then((cache) => cache.addAll(SHELL)).then(() => {
      // take over immediately instead of waiting
      return self.skipWaiting();
    }),
  );
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((names) =>
      Promise.all(names.filter((n) => n !== CACHE).map((n) => caches.delete(n))),
    ).then(() => self.clients.claim()),
  );
});

self.addEventListener("fetch", (event) => {
  // cache-first: fast repeat visits, network as backup
  event.respondWith(
    caches.match(event.request).then(
      (hit) => hit ?? fetch(event.request),
    ),
  );
});