fix オフライン対応

Author: usuyuki

frontend/src/lib/components/PWAUpdateNotification.svelte

@@ -2,31 +2,23 @@
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
   import "$lib/i18n";
-  let pwaInfo: unknown = null;
-
   let showUpdatePrompt = false;
   let updateServiceWorker: (() => Promise<void>) | null = null;
 
   onMount(async () => {
     try {
       // @ts-expect-error
-      const pwaModule = await import("virtual:pwa-info");
-      pwaInfo = pwaModule.pwaInfo;
-
-      if (pwaInfo) {
-        // @ts-expect-error
-        const { registerSW } = await import("virtual:pwa-register");
+      const { registerSW } = await import("virtual:pwa-register");
 
-        updateServiceWorker = registerSW({
-          immediate: true,
-          onNeedRefresh() {
-            showUpdatePrompt = true;
-          },
-          onOfflineReady() {
-            // PWA is ready for offline use
-          },
-        });
-      }
+      updateServiceWorker = registerSW({
+        immediate: true,
+        onNeedRefresh() {
+          showUpdatePrompt = true;
+        },
+        onOfflineReady() {
+          // PWA is ready for offline use
+        },
+      });
     } catch (error) {
       // PWA modules not available - this is expected in development
     }

frontend/src/lib/components/atoms/OfflineBanner.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import "$lib/i18n";
+  import { isOnline } from "$lib/online-store";
+</script>
+
+{#if !$isOnline}
+	<div
+		role="status"
+		aria-live="polite"
+		class="fixed bottom-0 left-0 right-0 z-50 bg-yellow-500 dark:bg-yellow-600 text-white px-4 py-2 flex items-center justify-center gap-2 text-sm shadow-lg"
+	>
+		<svg
+			class="w-4 h-4 flex-shrink-0"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M18.364 5.636l-12.728 12.728m0 0L5.636 18.364m12.728-12.728L18.364 18.364M12 12h.01"
+			/>
+		</svg>
+		<span>{$_("offline.banner.message")}</span>
+	</div>
+{/if}

frontend/src/lib/online-store.ts

@@ -0,0 +1,21 @@
+import { readable } from "svelte/store";
+import { browser } from "$app/environment";
+
+// ネットワーク接続状態を管理するストア
+export const isOnline = readable<boolean>(true, (set) => {
+  if (!browser) return;
+
+  // 初期値をnavigator.onLineから取得
+  set(navigator.onLine);
+
+  const handleOnline = () => set(true);
+  const handleOffline = () => set(false);
+
+  window.addEventListener("online", handleOnline);
+  window.addEventListener("offline", handleOffline);
+
+  return () => {
+    window.removeEventListener("online", handleOnline);
+    window.removeEventListener("offline", handleOffline);
+  };
+});

frontend/src/locales/en.json

@@ -30,7 +30,10 @@
     },
     "connectionStatus": "When connection is restored, click the button below to refresh the page.",
     "retryConnection": "Retry Connection",
-    "backToHome": "Back to Home"
+    "backToHome": "Back to Home",
+    "banner": {
+      "message": "You are offline. Previously visited pages are available from cache."
+    }
   },
   "pwa": {
     "install": {

frontend/src/locales/ja.json

@@ -30,7 +30,10 @@
     },
     "connectionStatus": "接続が復旧したら、下のボタンをクリックしてページを更新してください。",
     "retryConnection": "接続を再試行",
-    "backToHome": "ホームに戻る"
+    "backToHome": "ホームに戻る",
+    "banner": {
+      "message": "オフライン中です。過去に閲覧したページはキャッシュから表示されます。"
+    }
   },
   "pwa": {
     "install": {

frontend/src/routes/+layout.svelte

@@ -13,6 +13,7 @@
   import { autoPhraseEnabled } from "$lib/auto-phrase-store";
   import PWAInstallPrompt from "$lib/components/PWAInstallPrompt.svelte";
   import PWAUpdateNotification from "$lib/components/PWAUpdateNotification.svelte";
+  import OfflineBanner from "$lib/components/atoms/OfflineBanner.svelte";
   import type { LayoutData } from "./$types";
 
   export let data: LayoutData;
@@ -94,4 +95,5 @@
 
 <!-- PWA Components -->
 <PWAInstallPrompt />
-<PWAUpdateNotification />
+<PWAUpdateNotification />
+<OfflineBanner />

frontend/vite.config.ts

@@ -20,6 +20,10 @@ export default defineConfig({
         process.env.NODE_ENV === "development" ? "development" : "production",
       workbox: {
         globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
+        // オフライン時にナビゲーションが失敗した場合のフォールバックページ
+        navigateFallback: "/offline",
+        // APIルートはフォールバック対象から除外
+        navigateFallbackDenylist: [/^\/api\//],
         runtimeCaching: [
           {
             // SvelteKitのナビゲーションリクエスト(HTMLページ)をキャッシュ