Service Worker Demo

A minimal, hands-on look at what a service worker actually does: it sits between this page and the network, so it can cache assets and keep the app working offline. Compare this with as/models/runWorker.js — that's a plain web worker (one-shot background computation, no network involvement); this is the other kind of worker entirely.

checking network… checking service worker…

Try this

  1. Load the page once (this registers the service worker — first load is still served entirely from the network, since nothing controls it yet).
  2. Reload. The badge should flip to "controlled", and the log below should show index.html / logo.svg served from cache, not the network.
  3. Open DevTools → Network tab → check "Offline" (or turn off wifi), then reload again. The page still works.
  4. To see the update lifecycle: edit sw.js, bump VERSION, save, and reload twice. Watch the log for installing → installed → activating → activated.

Fetch log