fix 控えめにオフラインを出すようにする

Author: usuyuki

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

@@ -9,10 +9,10 @@
 	<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"
+		class="fixed top-16 right-4 z-50 bg-gray-800 dark:bg-gray-700 text-white px-3 py-2 rounded-lg shadow-lg flex items-center gap-2 text-xs"
 	>
 		<svg
-			class="w-4 h-4 flex-shrink-0"
+			class="w-3.5 h-3.5 flex-shrink-0 text-yellow-400"
 			fill="none"
 			stroke="currentColor"
 			viewBox="0 0 24 24"
@@ -25,6 +25,6 @@
 				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>
+		<span>{$_("offline.title")}</span>
 	</div>
 {/if}

frontend/src/locales/en.json

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

frontend/src/locales/ja.json

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

frontend/vite.config.ts

@@ -12,27 +12,23 @@ export default defineConfig({
     SvelteKitPWA({
       registerType: "autoUpdate",
       devOptions: {
-        enabled: true,
-        type: "module",
+        enabled: false,
       },
       injectRegister: "auto",
       mode:
         process.env.NODE_ENV === "development" ? "development" : "production",
       workbox: {
         globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
-        // オフライン時にナビゲーションが失敗した場合のフォールバックページ
-        navigateFallback: "/offline",
-        // APIルートはフォールバック対象から除外
-        navigateFallbackDenylist: [/^\/api\//],
         runtimeCaching: [
           {
             // SvelteKitのナビゲーションリクエスト(HTMLページ)をキャッシュ
+            // SSRアプリのため navigateFallback は使用しない（SPA専用のためSSRと相性が悪い）
             urlPattern: ({ request }) => request.mode === "navigate",
             handler: "NetworkFirst",
             options: {
               cacheName: "pages-cache",
               cacheableResponse: { statuses: [0, 200] },
-              networkTimeoutSeconds: 3,
+              networkTimeoutSeconds: 10,
             },
           },
         ],