Service Worker caching strategy defined

Without a Service Worker caching strategy, every visit to your site requires a full round-trip to the origin for every asset (ISO-25010 time-behaviour). On return visits — where a Service Worker could serve assets from cache in under 1ms — users experience full network latency instead. A missing cache versioning strategy means that when you deploy, old Service Worker caches persist and serve stale JavaScript, CSS, or HTML until the user manually clears their cache. Stale Service Worker caches are one of the hardest classes of production bug to diagnose.

Implement a Service Worker with cache versioning. The version constant forces cache invalidation on every deploy:

// public/sw.ts
const CACHE_VERSION = 'v2'  // increment on every deploy
const CACHE_NAME = `app-${CACHE_VERSION}`
const PRECACHE_ASSETS = ['/index.html', '/styles/main.css', '/js/app.js']

self.addEventListener('install', (e: ExtendableEvent) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE_ASSETS))
  )
})

self.addEventListener('activate', (e: ExtendableEvent) => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    )
  )
})

self.addEventListener('fetch', (e: FetchEvent) => {
  e.respondWith(
    caches.match(e.request).then(cached => cached ?? fetch(e.request))
  )
})

For Next.js projects, use next-pwa or Workbox to generate Service Worker configuration automatically with minimal manual maintenance.