Update index.html

index.html

@@ -379,7 +379,7 @@ document.addEventListener('DOMContentLoaded', function () {
             /* プログレスバーのマーカー */
             .progress-marker {
             position: absolute;
-            bottom: -5px;
+            bottom: -10px;
             width: 0;
             height: 0;
             border-left: 5px solid transparent;
@@ -934,7 +934,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
             </div>
         </div>
         <h1>文化発表会音声動画プレイヤー</h1>
-        <div class="settings" hidden>
+        <div class="settings">
             <h2>サービスワーカー設定</h2>
             <div hidden>
                 <!--邪魔だから一時的に非表示-->
@@ -998,102 +998,136 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                     <input type="checkbox" id="sw-root" checked>ルートファイル (/)</label>
                 </div>
             </div>
-            <a>絶対に押さないでください。これはオフラインでも使用できるようにする機能のテスト中で、ページが更新できなくなります。</a>
+            <a>下記のボタンを押すと、サービスワーカーを使用してページをオフラインで使用できるようにします。<br>
+              <b>これはテスト的な機能で、ページの更新などができなくなるバグが発生する可能性があります。<br>(更新機能は実装していますが安定して動作するとは限りません。)<br>
+              ページが更新されない場合、動画の更新ができなかったり既存のバグが残り続けたりする可能性があります。</b></a>
             <br>
             <button class="combine-button" id="sw-register-btn" disabled>登録を開始</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();
-                    for (const registration of registrations) {
-                      try {
-                        await registration.unregister();
-                        updateStatus('Service Workerをアンレジスターしました。');
-                      } catch (unregErr) {
-                        updateError('Service Workerのアンレジスター中に例外が発生しました。', unregErr);
-                        return;
-                      }
-                    }
-                
-                    updateStatus('アンレジスター完了。新しいService Workerを登録中...');
-                
-                    setTimeout(async () => {
-                      try {
-                        const newRegistration = await navigator.serviceWorker.register('/sw.js');
-                        updateStatus('Service Workerが正常に登録されました。\n登録範囲: ' + newRegistration.scope);
-                
-                        // チェックボックスの状態からファイルリストを作成
-                        const fileMap = {
-                          'sw-video': '/v.mp4',
-                          'sw-t-video': '/t/v.mp4',
-                          'sw-piano': '/p.mp3',
-                          'sw-soprano': '/s.mp3',
-                          'sw-alto': '/a.mp3',
-                          'sw-tenor': '/t.mp3',
-                          'sw-combined': '/k.mp3',
-                          'sw-t-piano': '/t/p.mp3',
-                          'sw-t-soprano': '/t/s.mp3',
-                          'sw-t-alto': '/t/a.mp3',
-                          'sw-t-tenor': '/t/t.mp3',
-                          'sw-t-combined': '/t/k.mp3',
-                          'sw-index': '/index.html',
-                          'sw-root': '/',
-                        };
-                
-                        // チェックされているものだけ抽出
-                        const filesToCache = [];
-                        const checkboxStates = {};
-                        for (const [id, url] of Object.entries(fileMap)) {
-                          const checkbox = document.getElementById(id);
-                          if (!checkbox) continue;
-                          checkboxStates[id] = checkbox.checked;
-                          if (checkbox.checked) {
-                            filesToCache.push(url);
-                          }
-                        }
-                
-                        // SWがコントロール中ならメッセージ送信
-                        if (navigator.serviceWorker.controller) {
-                          navigator.serviceWorker.controller.postMessage({
-                            type: 'CACHE_FILES',
-                            files: filesToCache,
-                            checkboxStates: checkboxStates,
-                          });
-                          updateStatus('キャッシュ更新のメッセージをサービスワーカーに送信しました。');
-                        } else {
-                          updateStatus('サービスワーカーがコントロール中ではありません。キャッシュ更新メッセージは送信できません。');
-                        }
-                      } catch (regErr) {
-                        updateError('Service Workerの登録に失敗しました。', regErr);
-                      }
-                    }, 500);
-                  } catch (err) {
-                    updateError('Service Workerの処理中に致命的なエラーが発生しました。', err);
-                  }
-                });
-            </script>
+<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;
+    }
+
+    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;
+    }
+
+    // 更新フラグ
+    let hasUpdate = false;
+
+    try {
+      const registration = await navigator.serviceWorker.getRegistration();
+      if (registration) {
+        updateStatus('Service Workerは既に登録されています。更新を確認中...');
+
+        registration.onupdatefound = () => {
+          const newWorker = registration.installing;
+          if (newWorker) {
+            newWorker.onstatechange = () => {
+              if (newWorker.state === 'installed') {
+                if (navigator.serviceWorker.controller) {
+                  // すでに別のSWがアクティブ ⇒ 更新あり
+                  updateStatus('新しいService Workerがインストールされました。更新が利用可能です。');
+                  hasUpdate = true;
+                  registerBtn.textContent = '更新を開始';
+                  registerBtn.disabled = false;
+                } else {
+                  updateStatus('Service Workerが初めてインストールされました。');
+                }
+              }
+            };
+          }
+        };
+
+        // 明示的に更新を確認
+        await registration.update();
+      } else {
+        updateStatus('Service Workerはまだ登録されていません。');
+        registerBtn.textContent = '登録とキャッシュ';
+        registerBtn.disabled = false;
+      }
+    } catch (err) {
+      updateError('Service Workerの初期確認中にエラーが発生しました。', err);
+    }
+
+    // ボタンクリック時の動作
+    registerBtn.addEventListener('click', async () => {
+      registerBtn.disabled = true;
+      const fileMap = {
+        'sw-video': '/v.mp4',
+        'sw-t-video': '/t/v.mp4',
+        'sw-piano': '/p.mp3',
+        'sw-soprano': '/s.mp3',
+        'sw-alto': '/a.mp3',
+        'sw-tenor': '/t.mp3',
+        'sw-combined': '/k.mp3',
+        'sw-t-piano': '/t/p.mp3',
+        'sw-t-soprano': '/t/s.mp3',
+        'sw-t-alto': '/t/a.mp3',
+        'sw-t-tenor': '/t/t.mp3',
+        'sw-t-combined': '/t/k.mp3',
+        'sw-index': '/index.html',
+        'sw-root': '/',
+      };
+
+      function getSelectedFiles() {
+        const filesToCache = [];
+        const checkboxStates = {};
+        for (const [id, url] of Object.entries(fileMap)) {
+          const checkbox = document.getElementById(id);
+          if (checkbox) {
+            checkboxStates[id] = checkbox.checked;
+            if (checkbox.checked) filesToCache.push(url);
+          }
+        }
+        return { filesToCache, checkboxStates };
+      }
+
+      try {
+        updateStatus('既存のService Workerをアンレジスター中...');
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        for (const registration of registrations) {
+          await registration.unregister();
+        }
+
+        updateStatus('新しいService Workerを登録中...');
+        const newReg = await navigator.serviceWorker.register('/sw.js');
+        updateStatus('登録成功: ' + newReg.scope);
+
+        // 少し待ってcontrollerを取得
+        setTimeout(() => {
+          if (navigator.serviceWorker.controller) {
+            const { filesToCache, checkboxStates } = getSelectedFiles();
+            navigator.serviceWorker.controller.postMessage({
+              type: 'CACHE_FILES',
+              files: filesToCache,
+              checkboxStates,
+            });
+            updateStatus('キャッシュ更新メッセージを送信しました。');
+          } else {
+            updateStatus('Service Workerがコントロール中ではありません。');
+          }
+        }, 1000);
+      } catch (err) {
+        updateError('Service Workerの再登録に失敗しました。', err);
+      }
+    });
+  });
+</script>
         </div>
         <div class="container">
             <div class="audio-controls">