Service Worker Generator

A Service Worker is a JavaScript file that runs in the background, separate from the main browser thread. It acts as a proxy between your web app and the network, enabling offline support, background sync, push notifications, and fine-grained caching strategies. It's a core building block of Progressive Web Apps (PWAs).

Cache First checks the cache before going to the network. If the resource is cached, it serves it immediately without a network request. If not cached, it fetches from the network and caches the response. Best for static assets (JS, CSS, images) that rarely change — delivers fastest performance.

Network First always tries the network first and falls back to the cache if the network fails. Best for dynamic content like API responses, HTML pages, or anything that changes frequently. Ensures users always get the freshest content when online, with offline support as a fallback.

Stale While Revalidate returns cached content immediately (fast) while simultaneously fetching a fresh version in the background to update the cache for the next request. The user gets an instant response and the content stays fresh. Best for resources that can tolerate being slightly out of date, like news feeds or user avatars.

Place sw.js at the root of your site (e.g., /sw.js or /public/sw.js). The scope of a service worker is limited to its directory and all subdirectories — so a service worker at /sw.js can intercept requests for the whole site, but one at /app/sw.js can only intercept /app/* requests.

Increment the CACHE_NAME version (e.g., v1 → v2). The browser detects the changed file, installs the new service worker in the background, and activates it when all old tabs are closed. The activate handler deletes old caches by comparing against the new CACHE_NAME. Use skipWaiting() + clients.claim() to force immediate takeover.