Update index.html

index.html

@@ -764,50 +764,66 @@ if ('serviceWorker' in navigator) {
     <div class="settings">
       
     <h2>サービスワーカー設定</h2>
-    <div hidden><div class="setting-item">
-        <label><input type="checkbox" id="sw-video" checked> 動画ファイル (/v.mp4)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-t-video" checked> 動画ファイル (/t/v.mp4)</label>
-    </div><br>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-piano" checked> ピアノ音声 (/p.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-soprano" checked> ソプラノ音声 (/s.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-alto" checked> アルト音声 (/a.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-tenor" checked> テノール音声 (/t.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-combined" checked> 全体音声 (/k.mp3)</label>
-    </div><br>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-t-piano" checked> ピアノ音声 (/t/p.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-t-soprano" checked> ソプラノ音声 (/t/s.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-t-alto" checked> アルト音声 (/t/a.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-t-tenor" checked> テノール音声 (/t/t.mp3)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-t-combined" checked> 全体音声 (/t/k.mp3)</label>
-    </div><br>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-index" checked> インデックスファイル (/index.html)</label>
-    </div>
-    <div class="setting-item">
-        <label><input type="checkbox" id="sw-root" checked> ルートファイル (/)</label>
-    </div></div>
     <button class="combine-button" id="sw-register-btn">登録を開始</button>
     <div class="combine-status" id="sw-status"></div>
+      <script>
+        document.getElementById('sw-register-btn').addEventListener('click', async () => {
+  const statusElem = document.getElementById('sw-status');
+
+  function updateStatus(message) {
+    console.log(message);
+    statusElem.textContent = message;
+  }
+
+  function updateError(message, error) {
+    const errorMsg = `${message}\nエラー詳細: ${error?.message || error}`;
+    console.error(errorMsg, error);
+    statusElem.textContent = errorMsg;
+  }
+
+  if (!('serviceWorker' in navigator)) {
+    updateError('このブラウザはService Workerに対応していません。');
+    return;
+  }
+
+  try {
+    updateStatus('既存のService Workerをアンレジスター中...');
+
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    if (registrations.length === 0) {
+      updateStatus('登録されているService Workerはありません。');
+    } else {
+      for (const registration of registrations) {
+        try {
+          const success = await registration.unregister();
+          if (success) {
+            updateStatus('Service Workerをアンレジスターしました。');
+          } else {
+            updateStatus('Service Workerのアンレジスターに失敗しました。');
+          }
+        } catch (unregErr) {
+          updateError('Service Workerのアンレジスター中に例外が発生しました。', unregErr);
+          return;
+        }
+      }
+    }
+
+    updateStatus('アンレジスター完了。新しいService Workerを登録中...');
+
+    // 少し待機してから新しいSWを登録
+    setTimeout(async () => {
+      try {
+        const newRegistration = await navigator.serviceWorker.register('/sw.js');
+        updateStatus('Service Workerが正常に登録されました。\n登録範囲: ' + newRegistration.scope);
+      } catch (regErr) {
+        updateError('Service Workerの登録に失敗しました。', regErr);
+      }
+    }, 300);
+  } catch (err) {
+    updateError('Service Workerの処理中に致命的なエラーが発生しました。', err);
+  }
+});
+      </script>
 </div>
     <div class="container">
         <div class="video-container" id="video-container">