Service Worker Strategy Picker

A Service Worker is a JavaScript file that runs in the background, separate from the main browser thread. It acts as a programmable network proxy between your web app and the internet. Key capabilities: offline functionality (intercept and cache network requests), push notifications, background sync, and performance optimization via smart caching. Service Workers are the foundation of Progressive Web Apps (PWAs). They run only on HTTPS (except localhost) and have no DOM access.

CacheFirst: Check cache first; if found, return cached response. If not found, fetch from network and cache it. Best for static assets (CSS, fonts, images) that rarely change. NetworkFirst: Try the network first; on success, cache and return the response. On failure (offline), return cached version. Best for HTML pages and dynamic content where freshness matters but offline fallback is needed. CacheFirst is faster; NetworkFirst is fresher.

StaleWhileRevalidate returns the cached response immediately (fast) while simultaneously fetching a fresh version in the background to update the cache for next time. Best for: news feeds, social content, non-critical data where showing slightly stale content is acceptable but eventual freshness is desired. It provides fast load times while keeping cache reasonably fresh. Avoid for financial data, real-time prices, or any content where stale values cause problems.

Workbox is a Google library that wraps raw Service Worker APIs with higher-level caching strategies, background sync, and precaching. You don't need Workbox — you can write raw Service Worker code — but Workbox handles edge cases like cache quota management, request matching, cache versioning, and strategy composition. Most production PWAs use Workbox. With build tools like Vite (vite-plugin-pwa) or webpack (workbox-webpack-plugin), Workbox configuration is minimal.

Browsers check for Service Worker updates on every navigation. A new SW file (even 1 byte different) triggers the update flow: new SW installs → waits until all tabs using the old SW are closed → new SW activates. To force immediate activation: call self.skipWaiting() in the install event and clients.claim() in activate. For user-friendly updates, show a 'New version available — refresh' toast. Workbox's workbox-broadcast-update sends a message when cached responses change.