Files
famapp/public/sw.js
T
ginnoirandClaude Sonnet 4.6 afff22e994 Implement offline shell + service worker caching (task 51)
SW is now generated by next.config.ts on every build with a versioned
cache name (timestamp in prod, "dev" in dev). Strategies: stale-while-
revalidate for static chunks and navigation, network-first with 2s
timeout for API GETs, network-only for mutations. Offline mutations
postMessage to clients; pwa-register.tsx shows amber offline banner,
red mutation-failed toast, and indigo "new version" refresh prompt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 16:14:36 -05:00

131 lines
3.6 KiB
JavaScript

// famapp service worker — v1778101829038
// Generated at build time. Do not edit directly.
const CACHE_VERSION = "1778101829038";
const SHELL = "famapp-shell-" + CACHE_VERSION;
const API = "famapp-api-" + CACHE_VERSION;
const OFFLINE = "/offline.html";
// --- install: precache the offline fallback ---
self.addEventListener("install", (e) => {
e.waitUntil(caches.open(SHELL).then((c) => c.add(OFFLINE)));
self.skipWaiting();
});
// --- activate: evict old-version caches, claim clients ---
self.addEventListener("activate", (e) => {
e.waitUntil(
caches
.keys()
.then((keys) =>
Promise.all(
keys
.filter(
(k) =>
k.startsWith("famapp-") && !k.endsWith("-" + CACHE_VERSION)
)
.map((k) => caches.delete(k))
)
)
.then(() => self.clients.claim())
);
});
// --- fetch: strategy dispatch ---
self.addEventListener("fetch", (e) => {
const { request } = e;
const url = new URL(request.url);
// Mutations — network-only; notify clients if the network is unreachable.
if (request.method !== "GET") {
e.respondWith(
fetch(request).catch(() => {
self.clients
.matchAll({ includeUncontrolled: true })
.then((cs) =>
cs.forEach((c) => c.postMessage({ type: "OFFLINE_MUTATION" }))
);
return new Response(JSON.stringify({ error: "offline" }), {
status: 503,
headers: { "Content-Type": "application/json" },
});
})
);
return;
}
// Auth endpoints — always network-only.
if (url.pathname.startsWith("/api/auth/")) return;
// Next.js immutable static chunks — stale-while-revalidate.
if (url.pathname.startsWith("/_next/static/")) {
e.respondWith(staleWhileRevalidate(request, SHELL));
return;
}
// API GETs — network-first with 2-second timeout, fall back to cache.
if (url.pathname.startsWith("/api/")) {
e.respondWith(networkFirstWithTimeout(request, API, 2000));
return;
}
// Navigation — stale-while-revalidate; fall back to offline page.
if (request.mode === "navigate") {
e.respondWith(navigateWithFallback(request));
return;
}
});
// --- strategy helpers ---
async function staleWhileRevalidate(request, cacheName) {
const cache = await caches.open(cacheName);
const cached = await cache.match(request);
const update = fetch(request)
.then((res) => {
if (res.ok) cache.put(request, res.clone());
return res;
})
.catch(() => null);
// Serve cached immediately; let update happen in the background.
return cached ?? (await update);
}
async function networkFirstWithTimeout(request, cacheName, ms) {
const cache = await caches.open(cacheName);
const ac = new AbortController();
const timer = setTimeout(() => ac.abort(), ms);
try {
const res = await fetch(request, { signal: ac.signal });
clearTimeout(timer);
if (res.ok) cache.put(request, res.clone());
return res;
} catch {
clearTimeout(timer);
return (await cache.match(request)) ?? new Response(null, { status: 503 });
}
}
async function navigateWithFallback(request) {
const cache = await caches.open(SHELL);
const cached = await cache.match(request);
const networkFetch = fetch(request)
.then((res) => {
if (res.ok) cache.put(request, res.clone());
return res;
})
.catch(() => null);
if (cached) {
// Return cached immediately; revalidate in the background.
networkFetch;
return cached;
}
const net = await networkFetch;
if (net) return net;
return (
(await cache.match(OFFLINE)) ?? new Response("Offline", { status: 503 })
);
}