Service worker keeps serving the old version of my site after a deploy; users see stale JS/HTML until they close all tabs. How do I do cache busting and a proper update flow?

Cause: a service worker is updated, not replaced. The browser re-fetches the service worker script and compares it byte by byte; if it changed, the new worker installs in the background but then waits. By default it only activates after every tab controlled by the old worker is closed, so open pages keep the old worker and its old caches. Additional causes: sw.js itself being cached by the HTTP cache or CDN, a cache-first strategy serving old index.html, and old named caches that are never deleted. Fix: 1. Serve the service worker file (sw.js) so it is always revalidated: Cache-Control: no-cache on that file, and keep its URL and file name stable (do not hash it). Hashed names for the other assets are fine. 2. Version your caches. In the install handler, precache the new build's assets into a new cache name (for example v2). In the activate handler, delete every cache whose name is not on your keep-list, and wrap that in event.waitUntil(). 3. Serve index.html with revalidation (network-first or stale-while-revalidate for navigations) rather than cache-first, so new asset names are discovered. 4. Make the update visible: listen on the registration for an updatefound/waiting state and show "New version available, reload". When the user accepts, post a message to the waiting worker that calls self.skipWaiting(), then reload on the controllerchange event. Calling skipWaiting automatically is riskier: the new worker can take over a page that was loaded by the old one and lazy-loaded resources may no longer match. 5. clients.claim() makes a freshly activated worker control already-open pages; use it deliberately. 6. Long-lived single-page apps can call registration.update() periodically, since automatic checks mostly happen on navigations. 7. Toolkits such as Workbox handle precache revisioning and cleanup for you. Verify: in DevTools > Application > Service Workers a new worker moves from installing to activated after your prompt or reload, old caches are gone under Cache Storage, and the page loads the new asset hashes. Sources: https://developer.chrome.com/docs/workbox/service-worker-lifecycle https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers