Native mobile apps work offline. Web apps don't — refresh the page on a flight, you get the dinosaur. Service workers close that gap. A service worker is a JavaScript file the browser runs in the background, intercepting every network request the page makes. It can serve from cache, queue requests for retry, push notifications when the page is closed, even sync data in the background.
Combined with web app manifests + HTTPS, service workers turn a website into a Progressive Web App (PWA) — installable, offline-capable, indistinguishable from a native app for many use cases. Twitter Lite, Spotify Web, Pinterest, Notion all ship as PWAs.
02
The lifecycle
Page registers a service worker: navigator.serviceWorker.register('/sw.js').
Browser installs it in the background. Runs install event — typically pre-cache critical assets.
Activates on next page load (or immediately with skipWaiting()). Old service worker dies.
Intercepts requests via fetch event. Can return cached, fetch from network, or combine.
Runs in background independent of any open page. Can receive push notifications, run sync jobs.
Critical detail: service worker has no access to the DOM. It's a worker process. Communicates with pages via postMessage.
03
Caching strategies
Strategy
Behavior
Best for
Cache-only
Always serve from cache; never network
App shell (HTML, CSS, JS) versioned at build time
Network-only
Always serve from network; bypass SW for this path
Analytics, third-party APIs
Cache-first, fall back to network
Cache hit → return; miss → fetch + cache
Static assets, user avatars
Network-first, fall back to cache
Try network; if offline, serve cache
HTML pages — fresh when online, available offline
Stale-while-revalidate
Serve cache immediately, refresh in background
Mostly-static content with occasional updates
04
Deep dive — background sync + push
Service workers' superpower is that they run when the page isn't open. Two protocols exploit this:
Background Sync API. User taps "send tweet" while offline. Tweet queued. Browser closed. Hours later, the user's phone reconnects to WiFi. Service worker wakes up, retries queued requests, syncs successfully. User opens the app later: tweet is already sent. Twitter Lite uses this heavily.
Web Push. A push server can deliver a notification to a user's device even when the browser is closed. Service worker receives, displays system notification. User taps → opens the relevant page. Used by Slack web, X, Notion. Built on the same VAPID + HTTPS protocol as Chrome push extensions.
Combined effect: a PWA can behave like a native app — works offline, syncs in background, notifies the user. Without going through Apple/Google app stores.
Interview answer
"Service worker intercepts fetch events to serve offline (network-first for HTML, cache-first for static assets). Background Sync queues writes that fail when offline, retries on reconnect. Web Push delivers notifications even when the site isn't open. Combined, it's a near-native experience without an app store."
05
Limitations
HTTPS only. Service workers refuse to run over HTTP. (Localhost is allowed for dev.)
iOS support is partial. Apple resisted PWAs for years to push native App Store. iOS 17+ now supports installable PWAs but with restrictions on push and some APIs.
Cache eviction is opaque. Browser may evict your cached data under storage pressure. Don't store the only copy of anything important.
Update gotchas. Old SW serves cached HTML pointing at deleted JS bundle. Versioning + cleanup logic is essential. Workbox handles most of this.
Debugging is hard. SW runs in a separate context; you can't console.log from page → SW. DevTools has a dedicated SW panel; learn it.
06
Real-world
Twitter Lite
The PWA showcase
Drop-in replacement for Twitter mobile web. Works offline, supports notifications, installable. Cut data usage 70% vs native app on slow networks.
Notion / Linear
Editor PWAs
Service worker caches the entire app shell. Pages cached locally. Editing offline syncs on reconnect via Background Sync.
Workbox
Google's SW library
Abstracts the common patterns (cache strategies, precaching, background sync). The standard for non-trivial PWAs.
Spotify Web
Streaming PWA
Service worker handles playback + offline manifest caching. Indistinguishable from desktop app for most users.
07
Used in problems
News feed mobile-web uses service workers for offline reading. Google Docs caches the editor app shell + documents you've recently opened. E-commerce uses service workers for fast repeat-visit page loads.
