feat: offline content

public/sw.js

@@ -6,11 +6,90 @@
  *   { title, body, url, icon, tag, require_interaction }
  */
 
+// --- Offline caching (Save-offline feature) ---------------------------------
+// Bump CACHE_VERSION to invalidate old asset/page caches on the next activate.
+const CACHE_VERSION = "v1";
+const PAGES_CACHE = `offline-pages-${CACHE_VERSION}`; // saved page HTML documents
+const ASSETS_CACHE = `offline-assets-${CACHE_VERSION}`; // /_next/* + static files
+const OFFLINE_CACHES = [PAGES_CACHE, ASSETS_CACHE];
+// The library page doubles as the navigation fallback when offline.
+const OFFLINE_FALLBACK = "/offline-content";
+
 self.addEventListener("install", () => self.skipWaiting());
 self.addEventListener("activate", (event) =>
-  event.waitUntil(self.clients.claim()),
+  event.waitUntil(
+    (async () => {
+      // Drop stale offline caches from previous CACHE_VERSIONs.
+      const names = await caches.keys();
+      await Promise.all(
+        names
+          .filter(
+            (n) => n.startsWith("offline-") && !OFFLINE_CACHES.includes(n),
+          )
+          .map((n) => caches.delete(n)),
+      );
+      await self.clients.claim();
+    })(),
+  ),
 );
 
+// Treat content-hashed Next assets and static files as immutable → cache-first.
+function isCacheableAsset(url) {
+  if (url.origin !== self.location.origin) return false;
+  if (url.pathname.startsWith("/_next/")) return true;
+  return /\.(?:js|css|woff2?|ttf|otf|png|jpe?g|webp|avif|svg|ico|gif)$/.test(
+    url.pathname,
+  );
+}
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  if (req.method !== "GET") return; // never touch POSTs (push subscribe etc.)
+
+  const url = new URL(req.url);
+
+  // 1. Page navigations: network-first, fall back to a saved copy, then to the
+  //    offline library. This is what makes a "saved" page open with no network.
+  if (req.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          return await fetch(req);
+        } catch {
+          const pages = await caches.open(PAGES_CACHE);
+          const saved =
+            (await pages.match(req.url)) || (await pages.match(url.pathname));
+          if (saved) return saved;
+          const fallback = await pages.match(OFFLINE_FALLBACK);
+          if (fallback) return fallback;
+          return new Response(
+            "<!doctype html><meta charset=utf-8><title>Offline</title><body style=\"font-family:system-ui;padding:2rem\"><h1>You're offline</h1><p>This page hasn't been saved for offline use.</p>",
+            { headers: { "Content-Type": "text/html; charset=utf-8" }, status: 503 },
+          );
+        }
+      })(),
+    );
+    return;
+  }
+
+  // 2. Immutable same-origin assets: cache-first so the app shell boots offline.
+  if (isCacheableAsset(url)) {
+    event.respondWith(
+      (async () => {
+        const cache = await caches.open(ASSETS_CACHE);
+        const hit = await cache.match(req);
+        if (hit) return hit;
+        const res = await fetch(req);
+        if (res && res.ok) cache.put(req, res.clone());
+        return res;
+      })(),
+    );
+    return;
+  }
+
+  // 3. Everything else (BFF data, RSC, /api): straight to network.
+});
+
 // The page registers us as /sw.js?bff=<origin> so subscription management
 // works without a client tab open (the auth cookie rides on
 // credentials:"include"). Same-origin deployments fall back to our origin.