Service Workers

Every time your browser makes a network request, whether fetching an HTML page, an API response, an image, or a font, that request passes through a layer you can program. This layer is the service worker. It sits between your web page and the network, intercepting every fetch, and you decide what happens: serve from cache, go to the network, or combine both.

Twitter Lite (now X's mobile web app) uses a service worker to cache the app shell, JavaScript bundles, and user timeline data. On repeat visits, the app loads in under 2 seconds on 3G connections because most assets come from the local cache, no network needed. When offline, users can still browse their cached timeline, compose tweets (queued for sending when connectivity returns), and navigate the app.

A service worker is a JavaScript file that runs in a separate thread from your page. It has no access to the DOM. It cannot read document.getElementById. What it can do: intercept network requests, manage a cache, receive push notifications, and run background sync. It is the foundation that makes Progressive Web Apps possible.

Service workers have a strict lifecycle that confuses most developers the first time. Here is exactly what happens:

Registration. Your page calls navigator.serviceWorker.register('/sw.js'). The browser downloads the script and begins installing it.

Installing. The install event fires. This is where you pre-cache critical assets: the HTML shell, CSS, JS bundles, fonts, and key images. If any file fails to cache during install, the entire installation fails and the service worker does not activate.

Waiting. If an older version of the service worker is still controlling open tabs, the new version waits. It will not take over until all tabs using the old version close. This prevents two different versions from running simultaneously and causing data corruption.

Activating. When no old tabs remain (or you call self.skipWaiting()), the activate event fires. This is where you clean up old caches from previous versions. Delete cache entries that the new version does not need.

Active (controlling). The service worker now intercepts every fetch event from pages it controls. It stays active until a new version is registered, or the browser decides to terminate it to save memory (it restarts automatically on the next event).