@mcy2015/pi-web 0.0.0-stage → 0.13.1

package/public/sw.js

@@ -0,0 +1,183 @@
+const CACHE_PREFIX = "pi-web";
+const CACHE_VERSION = new URL(self.location.href).searchParams.get("v") || "dev";
+const STATIC_CACHE = `${CACHE_PREFIX}-static-${CACHE_VERSION}`;
+const OFFLINE_URL = "/offline.html";
+const PRECACHE_URLS = [
+  OFFLINE_URL,
+  "/icons/icon-192.png",
+  "/icons/icon-512.png",
+  "/icons/apple-touch-icon.png",
+];
+// A reachable port backed by a dead upstream accepts the connection and then
+// never answers: fetch() neither resolves nor rejects, so the navigation hangs
+// forever instead of falling back to offline.html. Bound every network wait.
+const NAVIGATION_TIMEOUT_MS = 8000;
+const ASSET_TIMEOUT_MS = 8000;
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches
+      .open(STATIC_CACHE)
+      .then((cache) => cache.addAll(PRECACHE_URLS))
+      .then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key.startsWith(`${CACHE_PREFIX}-`) && key !== STATIC_CACHE)
+            .map((key) => caches.delete(key)),
+        ),
+      )
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return;
+
+  // Session data and live agent traffic must always come from the local server.
+  if (url.pathname.startsWith("/api/") || url.pathname === "/sw.js") return;
+
+  // The manifest is runtime configuration. Bypass even entries left in an old
+  // cache, including requests with a query string or navigation mode.
+  if (url.pathname === "/manifest.webmanifest") return;
+
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetchWithTimeout(request, NAVIGATION_TIMEOUT_MS).catch(async () => {
+        const fallback = await caches.match(OFFLINE_URL);
+        return fallback ?? Response.error();
+      }),
+    );
+    return;
+  }
+
+  const isStaticAsset =
+    url.pathname.startsWith("/_next/static/") ||
+    PRECACHE_URLS.includes(url.pathname);
+
+  if (isStaticAsset) {
+    event.respondWith(cacheFirst(request, event));
+  }
+});
+
+self.addEventListener("push", (event) => {
+  let payload = {};
+  try {
+    payload = event.data ? event.data.json() : {};
+  } catch {
+    // Ignore malformed or missing push payloads.
+  }
+  const { title, body, url, tag } = payload;
+  if (typeof title !== "string" || !title || typeof body !== "string" || !body) return;
+
+  // Always surface a system notification. iOS revokes the push subscription
+  // when a service worker handles a push without showing a notification, so
+  // suppressing the notification while a window is visible poisons the
+  // subscription in the background-delivery case. Notifications sharing a tag
+  // replace each other instead of stacking, so a visible window merely sees
+  // the completion notification re-appear.
+  event.waitUntil(
+    self.registration.showNotification(title, {
+      body,
+      data: { url: typeof url === "string" && url ? url : "/" },
+      ...(typeof tag === "string" && tag ? { tag, renotify: true } : {}),
+    }),
+  );
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+
+  const requestedUrl = typeof event.notification.data?.url === "string"
+    ? event.notification.data.url
+    : "/";
+  let targetUrl = new URL("/", self.location.origin);
+  try {
+    const candidate = new URL(requestedUrl, self.location.origin);
+    if (candidate.origin === self.location.origin) targetUrl = candidate;
+  } catch {
+    // Keep the root URL when notification data is malformed.
+  }
+
+  event.waitUntil(focusOrOpenWindow(targetUrl.href));
+});
+
+async function focusOrOpenWindow(targetUrl) {
+  const windowClients = await self.clients.matchAll({
+    type: "window",
+    includeUncontrolled: true,
+  });
+  const exactClient = windowClients.find((client) => client.url === targetUrl);
+  const candidates = exactClient
+    ? [exactClient, ...windowClients.filter((client) => client !== exactClient)]
+    : windowClients;
+
+  for (const client of candidates) {
+    try {
+      const targetClient = client.url === targetUrl
+        ? client
+        : (await client.navigate(targetUrl)) ?? client;
+      await targetClient.focus();
+      return;
+    } catch {
+      // The window may have closed between matchAll and focus; try the next one.
+    }
+  }
+
+  await self.clients.openWindow(targetUrl);
+}
+
+/**
+ * Fetch with a ceiling on the wait for the response headers (time to first
+ * byte). The timer is cleared as soon as they arrive, so a response that
+ * streams a long body — Next.js streams SSR output — is never cut off
+ * mid-stream.
+ */
+async function fetchWithTimeout(request, timeoutMs) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    return await fetch(request, { signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function cacheFirst(request, event) {
+  const cached = await caches.match(request);
+  if (cached) return cached;
+
+  const response = await fetchWithTimeout(request, ASSET_TIMEOUT_MS);
+  if (response.ok && response.type === "basic") {
+    // Deliberately NOT awaited before returning the response.
+    //
+    // The SW script URL is versioned (?v=<app version>), so every upgrade
+    // starts a fresh cache: the first load after an upgrade misses on every
+    // chunk and writes them all at once. Awaiting each write here held every
+    // response behind Cache Storage I/O, which stalled navigations past
+    // NAVIGATION_TIMEOUT_MS — the browser showed the offline page while the
+    // local server was perfectly healthy. waitUntil keeps this worker alive
+    // until the write finishes without blocking the response.
+    const copy = response.clone();
+    event.waitUntil(
+      caches
+        .open(STATIC_CACHE)
+        .then((cache) => cache.put(request, copy))
+        .catch(() => {
+          // A failed write only costs one network re-fetch next time.
+        }),
+    );
+  }
+  return response;
+}

package/public/sw.test.mjs

@@ -0,0 +1,339 @@
+import assert from "node:assert/strict";
+import test, { mock } from "node:test";
+
+const listeners = new Map();
+globalThis.self = {
+  location: {
+    href: "https://pi.test/sw.js?v=test",
+    origin: "https://pi.test",
+  },
+  addEventListener: (type, listener) => listeners.set(type, listener),
+  clients: null,
+};
+
+await import("./sw.js");
+
+function dispatchNotificationClick(data) {
+  let pending;
+  let closed = false;
+  listeners.get("notificationclick")({
+    notification: {
+      data,
+      close: () => { closed = true; },
+    },
+    waitUntil: (promise) => { pending = promise; },
+  });
+  return { pending, wasClosed: () => closed };
+}
+
+function dispatchPush(payload, clients) {
+  let pending;
+  const shown = [];
+  self.clients = {
+    matchAll: async () => clients,
+    openWindow: async () => assert.fail("push must not open windows"),
+  };
+  self.registration = {
+    showNotification: async (title, options) => { shown.push({ title, options }); },
+  };
+  listeners.get("push")({
+    data: { json: () => payload },
+    waitUntil: (promise) => { pending = promise; },
+  });
+  return { pending, shown };
+}
+
+test("push always shows a notification, even when a window is visible", async () => {
+  const event = dispatchPush(
+    {
+      title: "Session complete",
+      body: "Task finished.",
+      url: "/?session=session-1",
+      tag: "pi-session-complete:session-1",
+    },
+    [
+      { url: "https://pi.test/?session=other", visibilityState: "hidden" },
+      { url: "https://pi.test/?session=session-1", visibilityState: "visible" },
+    ],
+  );
+  await event.pending;
+
+  // iOS revokes the push subscription when a push is handled without a
+  // notification, so the notification must never be suppressed.
+  assert.deepEqual(event.shown, [{
+    title: "Session complete",
+    options: {
+      body: "Task finished.",
+      data: { url: "/?session=session-1" },
+      tag: "pi-session-complete:session-1",
+      renotify: true,
+    },
+  }]);
+});
+
+test("push ignores malformed payloads", async () => {
+  const event = dispatchPush(
+    { title: "", body: 42 },
+    [],
+  );
+  await event.pending;
+
+  assert.deepEqual(event.shown, []);
+});
+
+test("notification click focuses an existing client at the session URL", async () => {
+  const calls = [];
+  const focusedClient = {
+    url: "https://pi.test/?session=session-1",
+    focus: async () => { calls.push("focus"); },
+    navigate: async () => assert.fail("exact client should not navigate"),
+  };
+  self.clients = {
+    matchAll: async () => [focusedClient],
+    openWindow: async () => assert.fail("existing client should be reused"),
+  };
+
+  const event = dispatchNotificationClick({ url: "/?session=session-1" });
+  await event.pending;
+
+  assert.equal(event.wasClosed(), true);
+  assert.deepEqual(calls, ["focus"]);
+});
+
+test("notification click navigates an existing client to the session", async () => {
+  const calls = [];
+  const navigatedClient = {
+    focus: async () => { calls.push("focus"); },
+  };
+  const existingClient = {
+    url: "https://pi.test/?session=other-session",
+    navigate: async (url) => {
+      calls.push(["navigate", url]);
+      return navigatedClient;
+    },
+    focus: async () => assert.fail("the navigated client should be focused"),
+  };
+  self.clients = {
+    matchAll: async () => [existingClient],
+    openWindow: async () => assert.fail("existing client should be reused"),
+  };
+
+  const event = dispatchNotificationClick({ url: "/?session=session-1" });
+  await event.pending;
+
+  assert.deepEqual(calls, [
+    ["navigate", "https://pi.test/?session=session-1"],
+    "focus",
+  ]);
+});
+
+test("notification click opens a window and rejects cross-origin targets", async () => {
+  const opened = [];
+  self.clients = {
+    matchAll: async () => [],
+    openWindow: async (url) => { opened.push(url); },
+  };
+
+  const event = dispatchNotificationClick({ url: "https://example.com/redirect" });
+  await event.pending;
+
+  assert.deepEqual(opened, ["https://pi.test/"]);
+});
+
+// A reachable port backed by a dead upstream answers nothing at all, so these
+// tests drive fetch() with a stub that only settles once the worker aborts it.
+function installOfflineStub() {
+  const offline = new Response("<!doctype html><title>Pi Web is offline</title>", {
+    status: 200,
+    headers: { "Content-Type": "text/html" },
+  });
+  globalThis.caches = {
+    match: async (request) => ((typeof request === "string" ? request : request.url).endsWith("/offline.html")
+      ? offline
+      : undefined),
+    open: async () => ({ put: async () => {} }),
+  };
+}
+
+function dispatchFetch(url, { mode = "cors", method = "GET" } = {}) {
+  let pending;
+  const background = [];
+  const request = new Request(url, { method });
+  Object.defineProperty(request, "mode", { value: mode });
+  listeners.get("fetch")({
+    request,
+    respondWith: (promise) => { pending = promise; },
+    waitUntil: (promise) => { background.push(promise); },
+  });
+  return { pending, background };
+}
+
+test("install precaches offline assets but not the runtime manifest", async () => {
+  let pending;
+  let precached;
+  let skipped = false;
+  globalThis.caches = {
+    open: async () => ({ addAll: async (urls) => { precached = urls; } }),
+  };
+  self.skipWaiting = async () => { skipped = true; };
+  listeners.get("install")({ waitUntil: (promise) => { pending = promise; } });
+  await pending;
+
+  assert.deepEqual(precached, [
+    "/offline.html",
+    "/icons/icon-192.png",
+    "/icons/icon-512.png",
+    "/icons/apple-touch-icon.png",
+  ]);
+  assert.equal(skipped, true);
+});
+
+test("manifest requests bypass the worker even with query strings and old cached entries", async () => {
+  const stale = new Response('{"name":"Old Pi"}');
+  let cacheReads = 0;
+  globalThis.caches = {
+    match: async () => { cacheReads++; return stale.clone(); },
+    open: async () => assert.fail("manifest must not be cached"),
+  };
+  const networkRequests = [];
+  globalThis.fetch = async (request) => {
+    networkRequests.push(request.url);
+    return new Response('{"name":"New Pi"}');
+  };
+
+  for (const path of ["/manifest.webmanifest", "/manifest.webmanifest?v=old"]) {
+    for (const mode of ["cors", "navigate"]) {
+      const url = `https://pi.test${path}`;
+      const { pending, background } = dispatchFetch(url, { mode });
+      assert.equal(pending, undefined, "no respondWith: leave the request to the browser");
+      assert.deepEqual(background, []);
+      // Model the browser's normal network fallback when respondWith is absent.
+      const response = await fetch(new Request(url));
+      assert.deepEqual(await response.json(), { name: "New Pi" });
+    }
+  }
+  assert.equal(cacheReads, 0, "old cached manifests must never be read");
+  assert.equal(networkRequests.length, 4);
+});
+
+/** fetch() that never settles until the signal it was handed is aborted. */
+function installHungNetwork() {
+  let aborted = false;
+  globalThis.fetch = (_request, init) =>
+    new Promise((_resolve, reject) => {
+      init.signal.addEventListener("abort", () => {
+        aborted = true;
+        reject(new DOMException("The operation was aborted.", "AbortError"));
+      });
+    });
+  return () => aborted;
+}
+
+/**
+ * Let a handler's await chain reach its fetch (and schedule its timer) before
+ * the fake clock is ticked. setImmediate is not faked, unlike setTimeout.
+ */
+const flushMicrotasks = () => new Promise((resolve) => setImmediate(resolve));
+
+test("a stalled navigation falls back to offline.html", async () => {
+  installOfflineStub();
+  const wasAborted = installHungNetwork();
+
+  mock.timers.enable({ apis: ["setTimeout"] });
+  try {
+    const { pending } = dispatchFetch("https://pi.test/", { mode: "navigate" });
+    await flushMicrotasks();
+    mock.timers.tick(8000);
+    const response = await pending;
+
+    assert.equal(wasAborted(), true, "a hung upstream must be aborted, not awaited forever");
+    assert.match(await response.text(), /Pi Web is offline/);
+  } finally {
+    mock.timers.reset();
+  }
+});
+
+test("a stalled static asset request is bounded as well", async () => {
+  installOfflineStub();
+  const wasAborted = installHungNetwork();
+
+  mock.timers.enable({ apis: ["setTimeout"] });
+  try {
+    const { pending } = dispatchFetch("https://pi.test/_next/static/chunks/app.js");
+    // cacheFirst awaits the cache lookup before it reaches the network.
+    await flushMicrotasks();
+    mock.timers.tick(8000);
+
+    assert.equal(wasAborted(), true);
+    await assert.rejects(pending, /abort/i);
+  } finally {
+    mock.timers.reset();
+  }
+});
+
+test("a cache miss responds before the cache write finishes", async () => {
+  let releaseWrite;
+  let writeStarted = false;
+  globalThis.caches = {
+    match: async () => undefined,
+    open: async () => ({
+      put: () => {
+        writeStarted = true;
+        return new Promise((resolve) => { releaseWrite = resolve; });
+      },
+    }),
+  };
+  // fetch() to a same-origin URL yields type "basic"; a constructed Response
+  // defaults to "default", which cacheFirst deliberately skips.
+  globalThis.fetch = async () => {
+    const response = new Response("chunk", {
+      status: 200,
+      headers: { "Content-Type": "text/javascript" },
+    });
+    Object.defineProperty(response, "type", { value: "basic" });
+    return response;
+  };
+
+  const { pending, background } = dispatchFetch("https://pi.test/_next/static/chunks/app.js");
+  const response = await pending;
+
+  // The regression this guards: the SW script URL is versioned, so a version
+  // bump leaves the cache cold and every chunk misses at once. Awaiting each
+  // write held the responses behind Cache Storage I/O, which pushed
+  // navigations past the offline-fallback budget even though the server was
+  // healthy. The response must never wait for the write.
+  assert.equal(await response.text(), "chunk");
+
+  await flushMicrotasks();
+  assert.equal(writeStarted, true, "the write must still happen");
+  assert.equal(background.length, 1, "the write must be kept alive with waitUntil");
+
+  releaseWrite();
+  await background[0];
+});
+
+test("a response that arrives in time is not cut off mid-stream", async () => {
+  installOfflineStub();
+  let signal;
+  globalThis.fetch = async (_request, init) => {
+    signal = init.signal;
+    return new Response("<!doctype html><title>Pi Web</title>", {
+      status: 200,
+      headers: { "Content-Type": "text/html" },
+    });
+  };
+
+  mock.timers.enable({ apis: ["setTimeout"] });
+  try {
+    const { pending } = dispatchFetch("https://pi.test/", { mode: "navigate" });
+    const response = await pending;
+    // The budget only covers time to first byte: a long-lived body keeps
+    // streaming past it (Next.js streams its SSR payload).
+    mock.timers.tick(60000);
+
+    assert.equal(signal.aborted, false);
+    assert.match(await response.text(), /<title>Pi Web<\/title>/);
+  } finally {
+    mock.timers.reset();
+  }
+});