Service Workers Cheat Sheet
Service worker lifecycle, caching strategies, fetch handling, registration, and offline patterns.
Modern Frontend
service-worker
pwa
caching
A service worker is a script the browser runs in the background to intercept network requests, cache assets, and enable offline support. It sits between the page and the network.
Lifecycle
code
register → install → activate → fetch (idle)
Table
| Event | Purpose |
|---|---|
install | Precache assets; call skipWaiting(). |
activate | Clean old caches; call clients.claim(). |
fetch | Intercept requests and serve from cache/network. |
Registration
js
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js").then((reg) => {
console.log("Registered", reg.scope);
});
}
Caching strategies
Table
| Strategy | Pattern | Use for |
|---|---|---|
| Cache first | Cache → network fallback | Static assets, app shell. |
| Network first | Network → cache fallback | Fresh content, API. |
| Stale-while-revalidate | Serve cache, update in background | Images, non-critical data. |
| Cache only | Always cache | Precache-only assets. |
| Network only | Always network | Non-cacheable requests. |
Basic fetch handler
js
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((cached) => {
return cached || fetch(event.request);
})
);
});
Precache on install
js
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open("v1").then((cache) => cache.addAll(["/", "/app.js", "/style.css"]))
);
self.skipWaiting();
});