From 4cc9d66403e573629625227d9ec52f07a928fa32 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 10:28:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20SW=20=E7=BC=93=E5=AD=98=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E9=A1=B5=E9=9D=A2=E4=B8=8D=E6=9B=B4=E6=96=B0=20?=
 =?UTF-8?q?=E2=80=94=20fetch=20=E7=BB=95=E8=BF=87=20HTTP=20=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=20+=20hydration=20=E9=97=AA=E5=B1=8F=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sw.js: HTML fetch 加 cache:"no-cache"，避免从浏览器缓存拿旧页面
- ServiceWorkerRegistrar: 注册时 updateViaCache:"none"，确保 SW 自身及时更新
- blindbox/page: 增加 hydrated 状态，防止 SSR/CSR 内容不一致导致闪屏
---
 public/sw.js                              | 2 +-
 src/app/blindbox/page.tsx                 | 8 +++++---
 src/components/ServiceWorkerRegistrar.tsx | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index f9a9905..d70112b 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -57,7 +57,7 @@ self.addEventListener("fetch", (event) => {
 
   // HTML pages: network-first, fallback to cache, then offline page
   event.respondWith(
-    fetch(request)
+    fetch(request, { cache: "no-cache" })
       .then((response) => {
         const clone = response.clone();
         caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 5046547..fd9031a 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -31,6 +31,7 @@ interface RoomSummary {
 
 export default function BlindboxLobbyPage() {
   const router = useRouter();
+  const [hydrated, setHydrated] = useState(false);
   const [loggedIn, setLoggedIn] = useState(false);
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [showAuth, setShowAuth] = useState(false);
@@ -50,6 +51,7 @@ export default function BlindboxLobbyPage() {
     if (registered) {
       setProfile(getCachedProfile());
     }
+    setHydrated(true);
   }, []);
 
   useEffect(() => {
@@ -207,7 +209,9 @@ export default function BlindboxLobbyPage() {
       </motion.div>
 
       <AnimatePresence mode="wait">
-        {!loggedIn ? (
+        {!hydrated || (loggedIn && loading) ? (
+          <BlindboxListSkeleton />
+        ) : !loggedIn ? (
           /* ============ Layer 1: Unauthenticated — Login CTA ============ */
           <motion.div
             key="intro"
@@ -230,8 +234,6 @@ export default function BlindboxLobbyPage() {
               仅需用户名 + 密码，10 秒注册
             </p>
           </motion.div>
-        ) : loading ? (
-          <BlindboxListSkeleton />
         ) : loadError ? (
           <motion.div
             key="load-error"
diff --git a/src/components/ServiceWorkerRegistrar.tsx b/src/components/ServiceWorkerRegistrar.tsx
index 9299ca4..5a25659 100644
--- a/src/components/ServiceWorkerRegistrar.tsx
+++ b/src/components/ServiceWorkerRegistrar.tsx
@@ -5,7 +5,7 @@ import { useEffect } from "react";
 export default function ServiceWorkerRegistrar() {
   useEffect(() => {
     if ("serviceWorker" in navigator) {
-      navigator.serviceWorker.register("/sw.js").catch(() => {});
+      navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" }).catch(() => {});
     }
   }, []);