Request flow

1. 1Page requests /logo.svg
2. 2Service worker checks the cache first
3. 3Cache hit: respond instantly, zero network
4. 4Cache miss: fetch from network, store a copy, then respond

Trade-offs

// sw-cache-first.js - serve from cache, fall back to network.
// Best for: images, fonts, versioned bundles (app.[hash].js).

const CACHE = "static-v1";

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((cache) =>
      cache.addAll(["/", "/styles.css", "/app.js", "/logo.svg"])
    )
  );
});

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((hit) => {
      if (hit) return hit;                       // cache hit: instant
      return fetch(e.request).then((res) => {    // miss: go to network
        const copy = res.clone();
        caches.open(CACHE).then((cache) => cache.put(e.request, copy));
        return res;
      });
    })
  );
});

5 of 5 free uses left.

// Register from your page (HTTPS or localhost only)
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js", { scope: "/" });
  });
}

Serve the recipe as /sw.js at your site root so its scope covers the whole site. Debug in DevTools under Application and Service Workers.