Merge pull request #365 from project-mikan/fix/white-pwa

fix PWAで白くなるのを防ぐ

Author: usuyuki

frontend/src/lib/components/PWAUpdateNotification.svelte

@@ -13,7 +13,18 @@
       updateServiceWorker = registerSW({
         immediate: true,
         onNeedRefresh() {
-          showUpdatePrompt = true;
+          // スタンドアロン（PWA）モードの場合は自動リロードして白画面を防ぐ
+          if (window.matchMedia("(display-mode: standalone)").matches) {
+            updateServiceWorker?.()
+              .then(() => {
+                window.location.reload();
+              })
+              .catch(() => {
+                window.location.reload();
+              });
+          } else {
+            showUpdatePrompt = true;
+          }
         },
         onOfflineReady() {
           // PWA はオフライン使用の準備が完了しました

frontend/src/routes/+layout.svelte

@@ -24,12 +24,38 @@
 
   let lastActiveTime = Date.now();
 
+  const STALE_CACHE_THRESHOLD_MS = 30 * 60 * 1000;
+  const TOKEN_REFRESH_THRESHOLD_MS = 5 * 60 * 1000;
+
+  // フォーム入力中かどうかを確認（リロード前のデータロスを防ぐ）
+  function isEditingForm(): boolean {
+    const el = document.activeElement;
+    if (!el) return false;
+    const tag = el.tagName.toLowerCase();
+    return (
+      tag === "input" ||
+      tag === "textarea" ||
+      tag === "select" ||
+      (el as HTMLElement).isContentEditable
+    );
+  }
+
+  // キャッシュが古くなっている場合にリロードする（フォーム編集中はスキップ）
+  function reloadIfStale(inactiveTime: number): boolean {
+    if (inactiveTime > STALE_CACHE_THRESHOLD_MS && !isEditingForm()) {
+      window.location.reload();
+      return true;
+    }
+    return false;
+  }
+
   // ページがフォーカスされた時にトークンをチェック
   function handleVisibilityChange() {
     if (browser && document.visibilityState === "visible") {
       const inactiveTime = Date.now() - lastActiveTime;
+      if (reloadIfStale(inactiveTime)) return;
       // 5分以上非アクティブだった場合、トークンをリフレッシュ
-      if (inactiveTime > 5 * 60 * 1000 && isAuthenticated && !isAuthPage) {
+      if (inactiveTime > TOKEN_REFRESH_THRESHOLD_MS && isAuthenticated && !isAuthPage) {
         invalidateAll();
       }
       lastActiveTime = Date.now();
@@ -40,8 +66,9 @@
   function handleFocus() {
     if (!browser) return;
     const inactiveTime = Date.now() - lastActiveTime;
+    if (reloadIfStale(inactiveTime)) return;
     // 5分以上非アクティブだった場合、トークンをリフレッシュ
-    if (inactiveTime > 5 * 60 * 1000 && isAuthenticated && !isAuthPage) {
+    if (inactiveTime > TOKEN_REFRESH_THRESHOLD_MS && isAuthenticated && !isAuthPage) {
       invalidateAll();
     }
     lastActiveTime = Date.now();

frontend/vite.config.ts

@@ -19,6 +19,10 @@ export default defineConfig({
         process.env.NODE_ENV === "development" ? "development" : "production",
       workbox: {
         globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
+        // 新しいSWが即時アクティベートしてすべてのクライアントを制御する
+        // これにより久々に開いた際に古いキャッシュが残ることを防ぐ
+        skipWaiting: true,
+        clientsClaim: true,
         runtimeCaching: [
           {
             // SvelteKitのナビゲーションリクエスト(HTMLページ)をキャッシュ