Five service worker changes, each under an hour, each with a measurable result. They assume you already have a service worker registered; if you do not, start with navigator.serviceWorker.register('/sw.js') from a script on your page and come back.
Cache your HTML shell, CSS, and main JavaScript bundle in install, keyed by a version string you bump on deploy. The half that people forget is cleanup — in activate, iterate caches.keys() and delete anything that is not the current version. Without it, every deploy leaves another full copy of your assets on the user's disk until the browser evicts the origin entirely, taking the working cache with it. Workbox's generateSW does both if you would rather not hand-write it.
This is the mistake that produces "users are seeing a version from three weeks ago". Navigation requests should be network-first with a short timeout — race the network against a 3-second timer, fall back to cache when it loses. Static assets with hashed filenames are the opposite: cache-first is correct, because the URL changes when the content does.
Respond from cache immediately, then fetch in the background and update the cache for next time. Perfect for fonts, avatars and images where a slightly old version is harmless. Cap it: a cache with an expiration policy of a few dozen entries and a maximum age of a week keeps you from quietly consuming a user's storage quota. Workbox's ExpirationPlugin gives you maxEntries and maxAgeSeconds in two lines.
Precache a small /offline.html and catch failed navigations in your fetch handler, returning it instead of the browser's error page. This takes about fifteen minutes and is the single most visible improvement to a user on a train. Add a fallback image for failed image requests while you are there — a grey placeholder beats a broken-image icon.
A new service worker waits until every tab using the old one closes, which on desktop can be days. Calling self.skipWaiting() and clients.claim() unconditionally takes over immediately — but it can swap the asset set under a page mid-session and break a lazy-loaded chunk. The safe pattern is to detect the waiting worker, show a small "Update available — reload" prompt, and only then post a message that triggers skipWaiting. Separately, keep a deploy path that serves a service worker whose only job is registration.unregister() and a cache purge, because a broken service worker with a long cache lifetime is one of the few front-end bugs you cannot fix by pushing new code.
In DevTools, Application then Service Workers: tick Offline and reload — you should get your shell or your offline page, not a dinosaur. Check Cache Storage and confirm only the current version exists after a deploy. Then check navigator.storage.estimate() to see how much of the origin's quota you are actually using; if the number keeps climbing across deploys, win 1 is not finished.
Free tools, guides, and resources across the SPUNK13 network.
Visit spunk.bet400+ Free Tools