Service worker caching strategies, ranked by real-world use

A pragmatic ranking of service worker caching patterns — cache-first, network-first, stale-while-revalidate — with the exact scenarios each one wins.

Every service worker tutorial lists the same five caching strategies as if they were peers. In practice, three of them matter and each maps to a specific asset type. Here’s how to pick.

Stale-while-revalidate (default)

Serve from cache immediately, then fetch in the background to update. Best for images, fonts, JSON APIs and CSS that isn’t content-hashed. Users see instant loads; the next visit gets the fresh version.

Cache-first (versioned assets only)

Use only when a filename change guarantees a content change — e.g. Vite/Webpack hashed app.9f3d.js. Cache forever; safe because the URL itself changes on redeploy.

Network-first with timeout (HTML)

Try the network for 2–3 seconds, fall back to cache. HTML is the wrong place to cache aggressively — visitors expect fresh content on the top-level document.

Anti-patterns

Cache-only in production. If the cache is missing an asset, the page silently breaks.
Network-only for offline-critical routes. Defeats the point of a service worker.
Precaching everything. Pushes install size past the mobile data budget and stalls the first render.

Workbox versus hand-rolled

If you’re shipping a real product, use Workbox. It handles cleanup, versioning and expiration correctly. Hand-roll a service worker only for the two-file demo you’re going to throw away.