ttvfx/public/set/sw.js

// Offline cache for /set (screen markers, spill checker, VFX report). Crews often have no signal on set:
// once the page has loaded once, it and every marker image work offline.
// Must match OFFLINE_CACHE in components/set/MarkerPicker.tsx
const CACHE = "ttvfx-set-v1";

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(CACHE).then((c) => c.addAll(["/set/"])).then(() => self.skipWaiting()));
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches
      .keys()
      .then((keys) => Promise.all(keys.filter((k) => k.startsWith("ttvfx-set-") && k !== CACHE).map((k) => caches.delete(k))))
      .then(() => self.clients.claim()),
  );
});

self.addEventListener("fetch", (event) => {
  const req = event.request;
  if (req.method !== "GET") return;
  const url = new URL(req.url);
  if (url.origin !== self.location.origin) return;

  // Pages (/set/, /set/spill/): network first so updates arrive, cached copy when offline.
  // Each page is cached under its own path so one never replaces the other.
  if (req.mode === "navigate") {
    const page = url.pathname.endsWith("/") ? url.pathname : url.pathname + "/";
    event.respondWith(
      fetch(req)
        .then((res) => {
          if (res.ok) {
            const copy = res.clone();
            caches.open(CACHE).then((c) => c.put(page, copy));
          }
          return res;
        })
        .catch(() => caches.match(page).then((hit) => hit || caches.match("/set/"))),
    );
    return;
  }

  // Marker images, build assets, fonts, icons: cache first
  if (url.pathname.startsWith("/set/") || url.pathname.startsWith("/_next/") || /\.(png|woff2|webmanifest)$/.test(url.pathname)) {
    event.respondWith(
      caches.match(req).then(
        (hit) =>
          hit ||
          fetch(req).then((res) => {
            if (res.ok) {
              const copy = res.clone();
              caches.open(CACHE).then((c) => c.put(req, copy));
            }
            return res;
          }),
      ),
    );
  }
});