Stop 20 · Advanced TopicsTopics · 3/14

Service Workers

In short

A service worker sits between your web app and the network. It can answer requests from a cache, so your app loads even when the network is slow or missing.

A background script that intercepts network requests, enabling offline support, custom caching strategies, and push notifications — the technical engine behind PWAs.

The jaadu security guard holds a stored parcel at a society gate while a delivery person waits.

Think of it like this

The society security guard

Every delivery passes the guard at the gate. He can let it through, keep a parcel ready for you, or say "they're out, leave it here". A service worker is that guard for every request your page makes.

Watch it happen

Every request passes the guard

Page

Service worker

Cache

Network

1/7The page registers the service worker once.

The big ideas

What you need to know

Runs separately

It runs in the background, apart from your page. It can't touch the DOM directly.

Has a lifecycle

install (cache files), activate (clean old caches), then fetch events for every request.

Caching strategies

Cache first suits static files. Network first suits fresh data. Stale-while-revalidate shows cache, then updates it.

Updates wait

A new version waits until all tabs using the old one close, unless you call skipWaiting.

See it in code

Walk through the code

1// sw.js2const CACHE = "static-v1";3 4self.addEventListener("install", (event) => {5  event.waitUntil(6    caches.open(CACHE).then((c) => c.addAll(["/", "/app.css", "/app.js"]))7  );8});9 10self.addEventListener("fetch", (event) => {11  event.respondWith(12    caches.match(event.request).then((hit) => hit || fetch(event.request))13  );14});

1/3Name the cache with a version, so you can replace it later.

This is cache first: use the cached copy if there is one, else go to the network. Tools like Workbox give you ready-made strategies so you write less of this by hand.

Save yourself the pain

Common mistakes

Oops

Caching everything forever and never changing the cache name.

Do this instead

Version your cache (static-v2) and delete old ones in the activate event, or users get stuck on old files.

Oops

Using cache first for API data like order status.

Do this instead

Use network first or stale-while-revalidate for data that changes, and cache first for hashed static files.

Your mission

Survive airplane mode

~30 min

Quick check

You deployed a new version, but users still see the old site until they close every tab. Why?

Go deeper

1Register a basic service worker that caches your app's static assets.
2Learn the service worker lifecycle: install, activate, fetch.
3Try a caching strategy (cache-first vs network-first) and see the difference offline.