service-worker-strategylisted

# service-worker-strategy Use when configuring or modifying a service worker in a PWA project. The strategy choice per route class is the difference between "instant repeat visits" and "stale content shown for days" or "no offline support". If your app has no service worker yet, this skill says how to add one. If it has one but feels broken, this skill says how to debug. ## The library choice | Stack | Library | |---|---| | Next.js 16 | **Serwist** (modern Workbox successor, App Router compatible) | | Vite | **vite-plugin-pwa** (wraps Workbox) | | Astro | `@vite-pwa/astro` | | Custom | Workbox directly (hard mode; only if you understand SW internals) | Don't hand-write a service worker. Serwist/Workbox handles the lifecycle gotchas (skipWaiting, clientsClaim, cache versioning) you'd otherwise rediscover the hard way. ## Strategies per route class Match the strategy to the **freshness vs availability** trade-off of each resource type. | Resource | Strategy | Why | |---|---|---| | HTML pages (`/`, `/blog/*`) | `NetworkFirst({ networkTimeoutSeconds: 3 })` | Fresh content preferred; fallback to cache after 3s for offline | | JS / CSS bundles (hashed names) | `CacheFirst` | Hash in name = immutable; cache forever | | Fonts | `CacheFirst({ maxAge: 1 year })` | Rarely changes; large download | | Images | `CacheFirst({ maxAge: 30 days, maxEntries: 60 })` | Expensive bandwidth | | API responses | `NetworkOnly` (default) | Fresh data required; capture-queue handles offline writ