[codex] mac詳細ページのオフライン再読み込み対応 (#2)

kantacky · web-flow · commit e5d9ea5b60e6 · 2026-04-03T17:47:10.000+09:00
* 不要な公開SVGアセットを削除

* mac詳細ページをService Workerでオフライン表示対応
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import { AuthProvider } from "@/contexts/auth-context";
 import { AuthGuard } from "@/components/auth/auth-guard";
+import { ServiceWorkerRegistration } from "@/components/pwa/ServiceWorkerRegistration";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { Metadata } from "next";
 import { Noto_Sans_JP } from "next/font/google";
@@ -26,12 +27,13 @@ export default function RootLayout({
       className={`${notoSansJP.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
-          <TooltipProvider>
-            <AuthProvider>
-              <AuthGuard>{children}</AuthGuard>
-            </AuthProvider>
-          </TooltipProvider>
-        </body>
+        <TooltipProvider>
+          <AuthProvider>
+            <AuthGuard>{children}</AuthGuard>
+          </AuthProvider>
+        </TooltipProvider>
+        <ServiceWorkerRegistration />
+      </body>
     </html>
   );
 }
diff --git a/components/pwa/ServiceWorkerRegistration.tsx b/components/pwa/ServiceWorkerRegistration.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") return;
+    if (!("serviceWorker" in navigator)) return;
+
+    const register = async () => {
+      try {
+        await navigator.serviceWorker.register("/sw.js", { scope: "/" });
+      } catch {
+        // Service worker registration is best-effort.
+      }
+    };
+
+    void register();
+  }, []);
+
+  return null;
+}
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,101 @@
+const SW_VERSION = "v1";
+const MAC_DOCUMENT_CACHE = `mac-documents-${SW_VERSION}`;
+const STATIC_ASSET_CACHE = `static-assets-${SW_VERSION}`;
+
+const CURRENT_CACHES = [MAC_DOCUMENT_CACHE, STATIC_ASSET_CACHE];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cacheNames = await caches.keys();
+      await Promise.all(
+        cacheNames
+          .filter((cacheName) => !CURRENT_CACHES.includes(cacheName))
+          .map((cacheName) => caches.delete(cacheName))
+      );
+      await self.clients.claim();
+    })()
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+
+  if (isMacNavigationRequest(request)) {
+    event.respondWith(cacheFirstNavigation(request));
+    return;
+  }
+
+  if (isCacheableStaticAssetRequest(request)) {
+    event.respondWith(staleWhileRevalidate(request));
+  }
+});
+
+function isMacNavigationRequest(request) {
+  if (request.mode !== "navigate") return false;
+
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return false;
+
+  return url.pathname === "/mac" || url.pathname.startsWith("/mac/");
+}
+
+function isCacheableStaticAssetRequest(request) {
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return false;
+
+  if (url.pathname.startsWith("/_next/static/")) return true;
+
+  return ["script", "style", "font", "image"].includes(request.destination);
+}
+
+async function cacheFirstNavigation(request) {
+  const cache = await caches.open(MAC_DOCUMENT_CACHE);
+  const cached = await cache.match(request);
+  if (cached) {
+    return cached;
+  }
+
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      await cache.put(request, response.clone());
+    }
+    return response;
+  } catch {
+    return new Response("オフラインです。接続後に再試行してください。", {
+      status: 503,
+      headers: { "Content-Type": "text/plain; charset=UTF-8" },
+    });
+  }
+}
+
+async function staleWhileRevalidate(request) {
+  const cache = await caches.open(STATIC_ASSET_CACHE);
+  const cached = await cache.match(request);
+
+  const networkResponsePromise = fetch(request)
+    .then((response) => {
+      if (response.ok) {
+        void cache.put(request, response.clone());
+      }
+      return response;
+    })
+    .catch(() => null);
+
+  if (cached) {
+    return cached;
+  }
+
+  const networkResponse = await networkResponsePromise;
+  if (networkResponse) {
+    return networkResponse;
+  }
+
+  return new Response("", { status: 504 });
+}
