Progressive Web Apps & Service Workers

The plain-language idea

A Service Worker is a special kind of Web Worker (from the earlier worker lesson) that specifically acts as a programmable network proxy for your app — it can intercept every request your page makes and decide: serve from cache, go to the network, or some combination of both.

// sw.js — a minimal offline-first cache strategy
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

This intercepts every request; if a cached response exists, serve it instantly (works offline); otherwise fall back to the real network. A Progressive Web App (PWA) is the broader package this enables: a web app that can be installed to a home screen, works offline (or gracefully degrades), and can receive push notifications — using only web technology, no app-store build required.

navigator.serviceWorker.register('/sw.js') — installs a script that runs separately from the page, even after it's closed.

BackNext

What people usually miss

Watch out

• Service Workers and Web Workers are commonly confused, but do genuinely different jobs — a Web Worker offloads computation; a Service Worker intercepts network requests and enables offline capability and push notifications. Same "worker" naming, unrelated purposes.
• A Service Worker persists and can run even when your page isn't open — this is exactly what makes background sync and push notifications possible; it has a lifecycle independent of any specific tab.
• Getting a Service Worker's caching strategy wrong is a real, common bug source — caching too aggressively can serve genuinely stale content indefinitely (echoing the CDN-caching gotcha from the AWS lesson); real strategies need explicit versioning and cache-invalidation logic, not just "cache everything forever."

Why this matters in interviews

"How would you make a web app work offline?" is a direct, practical question, and Service Workers are the concrete underlying mechanism — knowing they're a distinct concept from Web Workers, with a genuinely different job, is a common, easy-to-verify point of confusion worth getting right.