fix: SW 缓存导致页面不更新 — fetch 绕过 HTTP 缓存 + hydration 闪屏修复
- sw.js: HTML fetch 加 cache:"no-cache",避免从浏览器缓存拿旧页面 - ServiceWorkerRegistrar: 注册时 updateViaCache:"none",确保 SW 自身及时更新 - blindbox/page: 增加 hydrated 状态,防止 SSR/CSR 内容不一致导致闪屏
This commit is contained in:
+1
-1
@@ -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));
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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(() => {});
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user