From 7e04fdf61efcfaebdd1135b635929d8c7b52446f Mon Sep 17 00:00:00 2001 From: kimminna Date: Fri, 17 Jul 2026 01:35:49 +0900 Subject: [PATCH] =?UTF-8?q?fix(web):=20=EC=98=A4=EB=9E=98=EB=90=9C=20?= =?UTF-8?q?=EC=84=9C=EB=B9=84=EC=8A=A4=EC=9B=8C=EC=BB=A4=EB=A5=BC=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A6=AC?= =?UTF-8?q?=ED=95=9C=EB=8B=A4=20(#267)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 도메인 이전 전 PWA로 등록된 오래된 서비스워커가 사용자 브라우저에 남아 캐시된 구버전 페이지를 서빙하며 API 요청을 CSP로 차단하는 문제를 발견했습니다 - 페이지 로드 시 현재 origin에 등록된 서비스워커와 캐시를 자동으로 해제하는 ServiceWorkerCleanup을 추가했습니다 - 루트 레이아웃에 연결했습니다 --- apps/timo-web/app/[locale]/layout.tsx | 2 ++ .../service-worker/ServiceWorkerCleanup.tsx | 26 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 apps/timo-web/providers/service-worker/ServiceWorkerCleanup.tsx diff --git a/apps/timo-web/app/[locale]/layout.tsx b/apps/timo-web/app/[locale]/layout.tsx index 1172807c..cfcd590e 100644 --- a/apps/timo-web/app/[locale]/layout.tsx +++ b/apps/timo-web/app/[locale]/layout.tsx @@ -12,6 +12,7 @@ import { AuthProvider } from "@/providers/auth/AuthProvider"; import { LanguageSyncProvider } from "@/providers/locale/LanguageSyncProvider"; import { OverlayProvider } from "@/providers/overlay/OverlayProvider"; import { QueryProvider } from "@/providers/query/QueryProvider"; +import { ServiceWorkerCleanup } from "@/providers/service-worker/ServiceWorkerCleanup"; const pretendard = localFont({ src: "../../fonts/PretendardVariable.woff2", @@ -106,6 +107,7 @@ export default async function RootLayout({ return ( + diff --git a/apps/timo-web/providers/service-worker/ServiceWorkerCleanup.tsx b/apps/timo-web/providers/service-worker/ServiceWorkerCleanup.tsx new file mode 100644 index 00000000..c3723d58 --- /dev/null +++ b/apps/timo-web/providers/service-worker/ServiceWorkerCleanup.tsx @@ -0,0 +1,26 @@ +"use client"; + +import { useEffect } from "react"; + +/** + * 도메인 이전 전 PWA로 설치됐던 구버전 서비스워커가 사용자 브라우저에 남아 + * 캐시된 구버전 페이지를 계속 서빙하는 문제를 막기 위해, + * 현재 origin에 등록된 서비스워커와 캐시를 전부 정리한다. + */ +export const ServiceWorkerCleanup = () => { + useEffect(() => { + if (!("serviceWorker" in navigator)) return; + + navigator.serviceWorker.getRegistrations().then((registrations) => { + registrations.forEach((registration) => registration.unregister()); + }); + + if (!("caches" in window)) return; + + caches.keys().then((keys) => { + keys.forEach((key) => caches.delete(key)); + }); + }, []); + + return null; +};