Service Worker Cache Strategy Generator

A cache strategy defines how a Service Worker handles fetch requests — whether to serve from cache first, network first, or a hybrid approach. Choosing the right strategy per route type (API vs static assets vs HTML) is key to a fast, reliable PWA.

Use Network First for dynamic content like API responses and HTML pages where freshness matters — fall back to cache when offline. Use Cache First for static assets like images, fonts, and versioned JS/CSS files where stale content is acceptable and speed is the priority.

Stale While Revalidate (SWR) serves the cached version immediately for speed, then fetches a fresh version from the network in the background to update the cache. It's ideal for non-critical content that changes occasionally — like avatars, settings data, or content feeds — where you want fast responses but eventually-fresh data.

No. This tool generates pure vanilla Service Worker code with no Workbox or other dependencies. The expiration and pattern matching logic is inlined directly into the generated sw.js file. This keeps your bundle small and avoids third-party dependencies.

Patterns support glob-style matching: use * as a wildcard (e.g., /api/*, *.css, /images/*). Routes are evaluated in order — the first matching pattern wins. A pattern that matches everything (/*) acts as a catch-all fallback and should be placed last.

Add this snippet to your main JavaScript bundle: if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); }); } Make sure sw.js is served from your domain root with Cache-Control: no-cache so updates are detected immediately.