Service Worker & PWA

A service worker is a network proxy that runs in its own thread, independent of pages. It enables offline, fine-grained caching, push, and background sync — but it's powerful and easy to footgun (stale content, "won't update"). Treat versioning and updates as first-class.

Lifecycle (internalize this)

register → install → activate → (controls pages) → update

• install: precache the app shell. Call self.skipWaiting() to activate immediately (only if you handle updates gracefully).
• activate: clean up old caches. Call self.clients.claim() to control existing pages.
• A new SW waits until all old tabs close unless you skipWaiting(). This is why "my change didn't show up".
• Scope = the SW's directory and below. Serve it from the root to control the whole origin.

navigator.serviceWorker.register('/sw.js'); // page side