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
|
// HTML pages: network-first, fallback to cache, then offline page
|
||||||
event.respondWith(
|
event.respondWith(
|
||||||
fetch(request)
|
fetch(request, { cache: "no-cache" })
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
const clone = response.clone();
|
const clone = response.clone();
|
||||||
caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
|
caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
|
||||||
|
|||||||
@@ -31,6 +31,7 @@ interface RoomSummary {
|
|||||||
|
|
||||||
export default function BlindboxLobbyPage() {
|
export default function BlindboxLobbyPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const [hydrated, setHydrated] = useState(false);
|
||||||
const [loggedIn, setLoggedIn] = useState(false);
|
const [loggedIn, setLoggedIn] = useState(false);
|
||||||
const [profile, setProfile] = useState<UserProfile | null>(null);
|
const [profile, setProfile] = useState<UserProfile | null>(null);
|
||||||
const [showAuth, setShowAuth] = useState(false);
|
const [showAuth, setShowAuth] = useState(false);
|
||||||
@@ -50,6 +51,7 @@ export default function BlindboxLobbyPage() {
|
|||||||
if (registered) {
|
if (registered) {
|
||||||
setProfile(getCachedProfile());
|
setProfile(getCachedProfile());
|
||||||
}
|
}
|
||||||
|
setHydrated(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -207,7 +209,9 @@ export default function BlindboxLobbyPage() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{!loggedIn ? (
|
{!hydrated || (loggedIn && loading) ? (
|
||||||
|
<BlindboxListSkeleton />
|
||||||
|
) : !loggedIn ? (
|
||||||
/* ============ Layer 1: Unauthenticated — Login CTA ============ */
|
/* ============ Layer 1: Unauthenticated — Login CTA ============ */
|
||||||
<motion.div
|
<motion.div
|
||||||
key="intro"
|
key="intro"
|
||||||
@@ -230,8 +234,6 @@ export default function BlindboxLobbyPage() {
|
|||||||
仅需用户名 + 密码,10 秒注册
|
仅需用户名 + 密码,10 秒注册
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : loading ? (
|
|
||||||
<BlindboxListSkeleton />
|
|
||||||
) : loadError ? (
|
) : loadError ? (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="load-error"
|
key="load-error"
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { useEffect } from "react";
|
|||||||
export default function ServiceWorkerRegistrar() {
|
export default function ServiceWorkerRegistrar() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if ("serviceWorker" in navigator) {
|
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