Update index.html

index.html

@@ -1005,92 +1005,100 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
             <button class="combine-button" id="sw-register-btn">登録を開始</button>
             <div class="combine-status" id="sw-status">
             </div>
-<script>
-  window.addEventListener('load', async () => {
-    const statusElem = document.getElementById('sw-status');
-    const registerBtn = document.getElementById('sw-register-btn');
+  <script>
+    window.addEventListener('load', async () => {
+      const statusElem = document.getElementById('sw-status');
+      const registerBtn = document.getElementById('sw-register-btn');
 
-    function updateStatus(message) {
-      console.log(message);
-      statusElem.textContent = message;
-    }
+      console.log('registerBtn:', registerBtn);
 
-    function updateError(message, error) {
-      const errorMsg = `${message}\nエラー詳細: ${error?.message || error}`;
-      console.error(errorMsg, error);
-      statusElem.textContent = errorMsg;
-    }
+      function updateStatus(message) {
+        console.log(message);
+        statusElem.textContent = message;
+      }
 
-    if (!navigator.onLine) {
-      updateStatus('オフラインのため操作できません。');
-      return;
-    }
+      function updateError(message, error) {
+        const errorMsg = `${message}\nエラー詳細: ${error?.message || error}`;
+        console.error(errorMsg, error);
+        statusElem.textContent = errorMsg;
+      }
 
-    registerBtn.style.display = 'inline-block';
+      if (!navigator.onLine) {
+        updateStatus('オフラインのため操作できません。');
+        return;
+      }
 
-    if (!('serviceWorker' in navigator)) {
-      updateError('このブラウザはService Workerに対応していません。');
-      return;
-    }
+      if (!('serviceWorker' in navigator)) {
+        updateError('このブラウザはService Workerに対応していません。');
+        return;
+      }
 
-    try {
-      // より確実に登録済みかどうかを判定
-      const reg = await navigator.serviceWorker.ready;
+      try {
+        // 登録済みかチェック
+        const reg = await navigator.serviceWorker.ready;
 
-      if (reg) {
-        updateStatus('Service Workerは既に登録されています。更新を確認中...');
-        const updatePromise = reg.update();
+        if (reg) {
+          updateStatus('Service Workerは既に登録されています。更新を確認中...');
+          registerBtn.style.display = 'inline-block';
+          registerBtn.textContent = '更新を開始';
+          registerBtn.disabled = false;
 
-        reg.onupdatefound = () => {
-          const newSW = reg.installing;
-          if (newSW) {
-            newSW.onstatechange = () => {
-              if (newSW.state === 'installed') {
-                if (navigator.serviceWorker.controller) {
-                  updateStatus('新しいService Workerがインストールされました。更新が必要です！');
-                  registerBtn.textContent = '更新を開始';
-                  registerBtn.disabled = false;
-                } else {
-                  updateStatus('初回インストール完了。');
+          const updatePromise = reg.update();
+
+          reg.onupdatefound = () => {
+            const newSW = reg.installing;
+            if (newSW) {
+              newSW.onstatechange = () => {
+                if (newSW.state === 'installed') {
+                  if (navigator.serviceWorker.controller) {
+                    updateStatus('ページの更新があるため、更新ボタンを押してサービスワーカーのキャッシュを再登録してください。');
+                    registerBtn.textContent = '更新を開始';
+                    registerBtn.disabled = false;
+                  } else {
+                    updateStatus('初回インストール完了。');
+                  }
                 }
-              }
-            };
-          }
-        };
+              };
+            }
+          };
 
-        await updatePromise;
+          await updatePromise;
+        }
+      } catch (err) {
+        updateStatus('Service Workerは未登録です。');
+        registerBtn.style.display = 'inline-block';
+        registerBtn.textContent = '登録とキャッシュ';
+        registerBtn.disabled = false;
       }
-    } catch {
-      updateStatus('Service Workerは未登録です。');
-      registerBtn.textContent = '登録とキャッシュ';
-      registerBtn.disabled = false;
-    }
 
-    registerBtn.addEventListener('click', async () => {
-      registerBtn.disabled = true;
-      try {
-        updateStatus('既存のService Workerをアンレジスター中...');
-        const regs = await navigator.serviceWorker.getRegistrations();
-        for (const reg of regs) {
-          await reg.unregister();
-        }
+      registerBtn.addEventListener('click', async () => {
+        console.log('登録ボタンが押されました');
+        registerBtn.disabled = true;
+        try {
+          updateStatus('既存のService Workerをアンレジスター中...');
+          const regs = await navigator.serviceWorker.getRegistrations();
+          for (const reg of regs) {
+            await reg.unregister();
+          }
 
-        updateStatus('新しいService Workerを登録中...');
-        await navigator.serviceWorker.register('/sw.js');
+          updateStatus('新しいService Workerを登録中...');
+          await navigator.serviceWorker.register('/sw.js');
 
-        // ready状態まで待機してからリロードボタン表示
-        await navigator.serviceWorker.ready;
-        updateStatus('登録完了。ページをリロードしてキャッシュを有効化します。');
-        registerBtn.textContent = 'ページをリロード';
-        registerBtn.disabled = false;
-        registerBtn.onclick = () => location.reload();
-      } catch (err) {
-        updateError('Service Workerの登録に失敗しました。', err);
-      }
-    });
-  });
-</script>
+          await navigator.serviceWorker.ready;
+          updateStatus('登録完了。ページをリロードしてキャッシュを有効化します。');
+          registerBtn.textContent = 'ページをリロード';
+          registerBtn.disabled = false;
 
+          // クリック時の挙動をページリロードに変更
+          registerBtn.onclick = () => location.reload();
+
+        } catch (err) {
+          updateError('Service Workerの登録に失敗しました。', err);
+          registerBtn.disabled = false;
+        }
+      });
+    });
+  </script>
           
         </div>
         <div class="container">