Create service-worker.js

service-worker.js

@@ -0,0 +1,51 @@
+const CACHE_NAME = 'my-cache-v1';
+const OFFLINE_URLS = [
+  '/',
+  '/index.html',
+  // 必要に応じてCSSやJSも追加
+];
+
+// インストール：キャッシュを保存
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.addAll(OFFLINE_URLS);
+    })
+  );
+  self.skipWaiting(); // すぐに有効化
+});
+
+// アクティベート：古いキャッシュ削除
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(keys =>
+      Promise.all(
+        keys.map(key => {
+          if (key !== CACHE_NAME) {
+            return caches.delete(key);
+          }
+        })
+      )
+    )
+  );
+  self.clients.claim(); // 即時制御
+});
+
+// フェッチ：ネット優先、失敗時にキャッシュ
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    fetch(event.request)
+      .then(response => {
+        // ネットから取得できたのでキャッシュ更新
+        const responseClone = response.clone();
+        caches.open(CACHE_NAME).then(cache => {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      })
+      .catch(() => {
+        // ネットがだめならキャッシュから
+        return caches.match(event.request);
+      })
+  );
+});