How should you choose between "Cache first", "Network first", and "Stale while revalidate" service worker strategies for different asset types?

PWAs use service worker caching strategies to balance speed, freshness, and offline resiliency. Picking the wrong strategy leads to stale UI or poor offline behavior.

A: Here’s when to use each: Asset Type / Goal Strategy Pros Cons Images, fonts, static assets Cache first Instant load, offline-ready Risk of stale assets unless precached; cache size grows API responses or HTML data Network first / cache fallback Always fresh content Not available offline unless fallback exists Assets that update occasionally Stale while revalidate Fast load; fresh in background Might serve stale content briefly Example: serve avatar images with stale-while-revalidate (fast + auto-update), API JSON with network-first fallback to cache, CSS/JS with cache-first and manual invalidation via SW version update. Stale-while-revalidate is especially powerful for items that don’t need to be perfectly fresh but need to update—avatar thumbnails, product images, static media—ensuring app remains responsive while catching up with updates behind the scenes.

Tags: Service Worker, PWA, cache strategy, offline, performance