What caching strategies can a service worker implement?

A service worker intercepts network requests and can apply different caching strategies per resource type:

Cache-first — serve from cache, fall back to network. Best for: versioned static assets (JS, CSS, fonts). Users get instant loads; stale risk is low since filenames change on update.

Network-first — try network, fall back to cache if offline. Best for: API responses where freshness matters. If network is slow, the user waits.

Stale-while-revalidate — serve cache immediately, update cache from network in background. Best for: content that can tolerate being one refresh cycle stale (blog posts, product listings).

Cache-only — only serve from cache, never hit network. Best for: pre-cached app shells in offline-first PWAs.

Network-only — never use cache. Best for: analytics, payment requests where you must not serve stale data.

// Workbox helper (used by Next.js PWA plugin)
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images', plugins: [new ExpirationPlugin({ maxEntries: 50 })] })
);