From bec0e2781964832103f6b20c720fb55f6573d74f Mon Sep 17 00:00:00 2001
From: judy <judy@symbolstar.local>
Date: Mon, 29 Jun 2026 10:55:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(web/sw):=20shell=20=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E7=94=A8=20network-first=EF=BC=8C=E7=A1=AC=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E5=8D=B3=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前 sw.js 对 app.js / style.css / xiaof.* / src/* 这些 shell 资源用的
是 stale-while-revalidate：先吐 cache 里的旧版，后台再拉新版放进 cache，
意味着每次部署后用户第一次刷新看到的还是旧版，要再刷一次才能用上新版。
Scott 之前反馈「修了还是抖」就是因为浏览器 SW 还在用旧 app.js。

现在改成 network-first：每次请求都先走网络，只有网络真的失败（离线/
DNS 等）才 fallback 到 cache。视觉上跟之前一样在线快，离线也一样能
用 shell；但部署新版后硬刷新（Cmd+Shift+R）一次就生效，不需要 clear
site data，也不需要刷两次。

顺便把 CACHE_VERSION 从 v1 bump 到 v2，强制清掉旧 cache。
---
 CHANGELOG.md |  1 +
 web/sw.js    | 40 +++++++++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0243958..e628425 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ auto-generated notes — but stable semver tags must pass.
 
 - Thread view no longer flickers on every refresh. The post list is now diffed in place (keyed by post id), so unchanged posts keep their existing DOM nodes — SSE bursts, the 8s poll fallback, and cross-tab broadcasts can all fire together without repainting the column. When SSE is healthy the per-thread poll is suppressed entirely.
 - Post column no longer shifts left/right when the pointer hovers the thread view. The Slack-style hover-reveal scrollbar now reserves its gutter at all times, so toggling the bar in/out doesn't reflow the column.
+- A single hard refresh (Cmd+Shift+R) is now enough to pick up new app.js / style.css after a deploy. The PWA service worker was using stale-while-revalidate for shell assets, which always served the previous version on the first load and only swapped in the new one on the next refresh — it now uses network-first with cache fallback, so the cache is only consulted when the network actually fails (offline).
 - _Add entries here as they ship. They get cut into the next `v<semver>` section at release time._
 
 <!--
diff --git a/web/sw.js b/web/sw.js
index 8d6b3d7..49555b6 100644
--- a/web/sw.js
+++ b/web/sw.js
@@ -2,14 +2,21 @@
  *
  * Strategy:
  *   - /api/*           → network-only, never cached (live data, SSE, etc.)
- *   - same-origin GET  → stale-while-revalidate for a small allow-list of
- *                        static shell assets; everything else falls through
- *                        to network without touching the cache.
+ *   - shell allow-list → network-first with cache fallback. Fresh code
+ *                        wins on every load; cache is only used when the
+ *                        network actually fails (offline). This is what
+ *                        keeps a single hard refresh (Cmd+Shift+R) enough
+ *                        to pick up new app.js / style.css — the older
+ *                        stale-while-revalidate strategy meant the user
+ *                        always saw the previous version on the first
+ *                        load after a deploy.
+ *   - everything else → falls through to the network without touching
+ *                        the cache.
  *
  * Bump CACHE_VERSION whenever you change cached files or this file itself
  * so old clients pull fresh copies on activate.
  */
-const CACHE_VERSION = 'openforge-shell-v1';
+const CACHE_VERSION = 'openforge-shell-v2';
 
 // Allow-list of path prefixes we are willing to cache. Anything outside this
 // list (HTML pages, /api/*, ad-hoc endpoints) is left to the network.
@@ -65,16 +72,19 @@ self.addEventListener('fetch', (event) => {
 
   event.respondWith((async () => {
     const cache = await caches.open(CACHE_VERSION);
-    const cached = await cache.match(req);
-    const network = fetch(req)
-      .then((res) => {
-        // Only cache successful, basic (same-origin) responses.
-        if (res && res.ok && res.type === 'basic') {
-          cache.put(req, res.clone()).catch(() => {});
-        }
-        return res;
-      })
-      .catch(() => cached); // offline: fall back to cache if we have it
-    return cached || network;
+    try {
+      const res = await fetch(req);
+      // Only cache successful, basic (same-origin) responses.
+      if (res && res.ok && res.type === 'basic') {
+        cache.put(req, res.clone()).catch(() => {});
+      }
+      return res;
+    } catch (_e) {
+      // Network failed (offline / DNS / etc.) → serve from cache if we
+      // have it; otherwise let the browser surface the network error.
+      const cached = await cache.match(req);
+      if (cached) return cached;
+      throw _e;
+    }
   })());
 });