Apia saysA service worker is a background proxy script that enables offline and caching.
Registered with navigator.serviceWorker.register("sw.js"), it runs on its own thread between your page and the network. It listens for install, activate, and fetch — intercepting requests to serve cached responses, enabling offline and instant loads. Requires HTTPS and a separate file; it's the core of PWAs (with push and background sync).
Power-ups you unlock
Background proxy on its own thread
Lifecycle: install → activate → fetch
Intercept fetch → serve cache → offline
HTTPS + separate file; core of PWAs
Legacy Larry attacks — common mistakes
Expecting it on http:// (https/localhost only)
Aggressive caching with no invalidation
Inline SW code instead of a separate file
Boss battleSketch registering a service worker and a cache-first fetch handler.
Example code
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>// page:
navigator.serviceWorker.register('/sw.js');
// sw.js:
self.addEventListener('fetch', e =>
e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))));</pre></body></html>