Offline & PWA tooling

Service Worker Generator

Pick a caching strategy and the files to precache, and get a complete, correct sw.js plus the registration snippet for your page.

Save the first block as sw.js at the root of your site (so its scope covers everything), and paste the second block into the page that should register it.

sw.js

Cache-first strategy

Registration snippet

Add to your main page

Everything is generated locally — nothing you type is sent anywhere.

🔄

Three real strategies

Cache-first, network-first and stale-while-revalidate, each with a correct install/activate/fetch flow.

📦

Precache list built in

List your app shell files once and they are installed and cleaned up automatically on version bumps.

📶

Offline fallback

Optionally serve a friendly offline page instead of the browser's default error when navigation fails.

How to use the service worker generator

Set your options, then copy the two generated blocks into your project.

  1. Name your cachePick a cache name and version; bump the version any time your precached files change.
  2. Choose a strategyCache-first for speed, network-first for freshness, or stale-while-revalidate for a mix of both.
  3. Copy sw.js and register itSave the first block as sw.js at your site root, then add the registration snippet to your page.

Choosing a caching strategy

A service worker sits between your page and the network, intercepting every fetch so you can decide exactly how each request is served. There is no single best strategy for every request, which is why real-world sites often use a different one per resource type — this generator gives you one solid strategy to start from and apply everywhere, which is plenty for most small to mid-sized sites.

Cache-first

Fastest option. Serves from the cache when possible and only reaches the network on a miss, then caches that response for next time.

Network-first

Always tries the network first so content stays fresh, falling back to the cache only when the network request fails.

Stale-while-revalidate

Responds instantly from the cache while fetching a fresh copy in the background, so the next visit gets the update.

Precache and cleanup

The install handler caches your file list up front; the activate handler deletes any cache from an older version automatically.

Service worker generator FAQ

Questions about strategies, versioning and offline fallbacks.

What is the difference between cache-first, network-first and stale-while-revalidate?

Cache-first serves a cached response immediately when one exists and only hits the network on a cache miss, which is fast but can show stale content. Network-first always tries the network first and falls back to the cache when offline, favouring freshness. Stale-while-revalidate returns the cached response instantly while fetching an update in the background for next time, balancing speed and freshness.

Do I need to change my cache name every time I update files?

Yes. Bump the cache version whenever precached files change. The generated activate handler deletes any cache whose name no longer matches the current CACHE_NAME, so a new version number is what actually clears out old, stale files.

What does the offline fallback page do?

If you provide a fallback path, the generated fetch handler serves that cached page when a navigation request fails and nothing matching is in the cache, so users see a friendly offline page instead of the browser's default error.

Why does the service worker call skipWaiting() and clients.claim()?

By default a new service worker waits until every open tab using the old one is closed before activating. skipWaiting() and clients.claim() together make the new version take control immediately, which is usually what you want during development and for simple sites.

Does this tool register a service worker on this page?

No. This page only generates the sw.js text and a registration snippet for you to copy into your own project. Nothing is installed or executed here.

Explore more free tools: Web Worker Boilerplate GeneratorPWA Icon GeneratorAll Features