Session 27: PWA autopilot — NetworkFirst cache policy, stale bucket cleanup, offline fallback, push helper, manifest polish, tier fix (1584 tests)

web/src/sw.ts

@@ -1,41 +1,170 @@
 /// <reference lib="webworker" />
 /// <reference types="@serwist/next/typings" />
 
-import { defaultCache } from '@serwist/next/worker';
-import { Serwist } from 'serwist';
+import {
+  Serwist,
+  NetworkFirst,
+  CacheFirst,
+  ExpirationPlugin,
+  type RuntimeCaching,
+} from 'serwist';
 
 declare const self: ServiceWorkerGlobalScope & {
   __SW_MANIFEST: (string | { url: string; revision: string | null })[];
 };
 
+/**
+ * VYNDR service worker (Session 27 — deployment-aware rewrite).
+ *
+ * The PWA stays — it powers push, offline, fast assets, and installs.
+ * The bug was the CACHE POLICY, not the SW. Sports data is time-
+ * sensitive: a 4-hour-old score is wrong, not stale. So pages + API +
+ * everything-dynamic are NetworkFirst (always fresh, cache only as an
+ * offline fallback). Only content-hashed static assets (which change
+ * URL every build) are CacheFirst.
+ *
+ * skipWaiting + clientsClaim mean a new build takes over on the very
+ * next navigation — no "close all tabs and hard-refresh" ritual.
+ */
+
+const OFFLINE_URL = '/offline';
+
+// The complete set of caches this SW version owns. The activate handler
+// below deletes anything else (the old defaultCache buckets:
+// start-url, next-data, apis, pages-rsc, static-js-assets, …) so a
+// returning user isn't served by a stale bucket from a prior version.
+const CURRENT_CACHES = [
+  'pages',
+  'api-responses',
+  'next-static',
+  'static-media',
+  'fallback',
+  'offline-fallback',
+];
+
+// Navigation NetworkFirst, with a last-resort offline page when both the
+// network AND the runtime cache miss (e.g. first visit to a never-cached
+// route while offline).
+const offlineFallbackPlugin = {
+  handlerDidError: async () => (await caches.match(OFFLINE_URL)) || Response.error(),
+};
+
+const runtimeCaching: RuntimeCaching[] = [
+  // API responses — ALWAYS network-first. Schedule, game lines, odds,
+  // streaks must be fresh; the cache is only an offline courtesy.
+  {
+    matcher: ({ url, sameOrigin }) => sameOrigin && url.pathname.startsWith('/api/'),
+    handler: new NetworkFirst({
+      cacheName: 'api-responses',
+      networkTimeoutSeconds: 5,
+      plugins: [new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 60 * 60 })],
+    }),
+  },
+  // HTML navigations — network-first so scores/copy are never stale.
+  {
+    matcher: ({ request }) => request.mode === 'navigate',
+    handler: new NetworkFirst({
+      cacheName: 'pages',
+      networkTimeoutSeconds: 5,
+      plugins: [
+        new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 24 * 60 * 60 }),
+        offlineFallbackPlugin,
+      ],
+    }),
+  },
+  // Next.js content-hashed static JS/CSS — cache-first is safe AND fast:
+  // a new build changes the URL, so old URLs are simply never requested.
+  {
+    matcher: ({ url, sameOrigin }) => sameOrigin && url.pathname.startsWith('/_next/static/'),
+    handler: new CacheFirst({
+      cacheName: 'next-static',
+      plugins: [new ExpirationPlugin({ maxEntries: 200, maxAgeSeconds: 30 * 24 * 60 * 60 })],
+    }),
+  },
+  // Images + fonts — cache-first (slow to change, expensive to refetch).
+  {
+    matcher: ({ url }) =>
+      url.pathname.startsWith('/images/') ||
+      url.pathname.startsWith('/icons/') ||
+      /\.(?:png|jpe?g|gif|svg|webp|ico|woff2?)$/.test(url.pathname),
+    handler: new CacheFirst({
+      cacheName: 'static-media',
+      plugins: [new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 30 * 24 * 60 * 60 })],
+    }),
+  },
+  // Everything else (incl. RSC / _next/data payloads) — network-first so
+  // dynamic content stays fresh; cache is offline insurance only.
+  {
+    matcher: () => true,
+    handler: new NetworkFirst({
+      cacheName: 'fallback',
+      networkTimeoutSeconds: 5,
+      plugins: [new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 24 * 60 * 60 })],
+    }),
+  },
+];
+
 const serwist = new Serwist({
   precacheEntries: self.__SW_MANIFEST,
   skipWaiting: true,
   clientsClaim: true,
   navigationPreload: true,
-  runtimeCaching: defaultCache,
+  runtimeCaching,
 });
 
 serwist.addEventListeners();
 
-// Web Push handler — fires when the push service delivers a notification.
+// Pre-cache the offline page so the navigation fallback always has it.
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('offline-fallback').then((cache) => cache.add(OFFLINE_URL)).catch(() => {}),
+  );
+});
+
+// On activation, delete cache buckets from prior SW versions. We keep our
+// CURRENT_CACHES and anything Serwist manages (its precache cache is
+// prefixed `serwist`), and drop the rest — clearing the legacy buckets a
+// previous deploy left behind so users never get served from them.
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((names) =>
+      Promise.all(
+        names
+          .filter((name) => !CURRENT_CACHES.includes(name) && !name.startsWith('serwist'))
+          .map((name) => {
+            console.log('[SW] deleting stale cache:', name);
+            return caches.delete(name);
+          }),
+      ),
+    ),
+  );
+});
+
+// ---- Web Push (Session 27 keeps the existing handlers) ----
 // Pushes are emitted server-side by src/services/distribution/webPush.js.
 self.addEventListener('push', (event) => {
   if (!event.data) return;
-  let payload: { title?: string; body?: string; icon?: string; url?: string };
+  let payload: { title?: string; body?: string; icon?: string; url?: string; tag?: string };
   try {
     payload = event.data.json();
   } catch {
     payload = { title: 'VYNDR', body: event.data.text() };
   }
-  const { title = 'VYNDR', body = '', icon = '/icons/icon-192.png', url = '/' } = payload;
+  const {
+    title = 'VYNDR',
+    body = '',
+    icon = '/icons/icon-192.png',
+    url = '/',
+    tag = 'vyndr-notification',
+  } = payload;
   event.waitUntil(
     self.registration.showNotification(title, {
       body,
       icon,
       badge: '/icons/icon-192.png',
+      tag,
       data: { url },
-    })
+    }),
   );
 });
 
@@ -47,6 +176,6 @@ self.addEventListener('notificationclick', (event) => {
       const existing = clients.find((c) => c.url.endsWith(url));
       if (existing) return existing.focus();
       return self.clients.openWindow(url);
-    })
+    }),
   );
 });