Update index.html

index.html

@@ -931,7 +931,6 @@ document.addEventListener('DOMContentLoaded', function() {
         window.alert(`${message}\n\nエラー詳細: ${error.message}`);
     }
 
-// サービスワーカー登録関数
 async function registerServiceWorker() {
     const statusElement = document.getElementById('sw-status');
     const registerBtn = document.getElementById('sw-register-btn');
@@ -955,15 +954,14 @@ async function registerServiceWorker() {
             'sw-t-soprano': document.getElementById('sw-t-soprano').checked,
             'sw-t-alto': document.getElementById('sw-t-alto').checked,
             'sw-t-tenor': document.getElementById('sw-t-tenor').checked,
-            'sw-t-combined': document.getElementById('sw-t-combined').checked
+            'sw-t-combined': document.getElementById('sw-t-combined').checked,
+            'sw-index': document.getElementById('sw-index').checked,
+            'sw-root': document.getElementById('sw-root').checked
         };
 
         // チェックされたファイルを収集
         const filesToCache = [];
         
-        // index.htmlは常に含める
-        filesToCache.push('/index.html');
-        
         // 通常のメディアファイル
         if (checkboxStates['sw-video']) filesToCache.push('/v.mp4');
         if (checkboxStates['sw-piano']) filesToCache.push('/p.mp3');
@@ -986,41 +984,49 @@ async function registerServiceWorker() {
         // Service Workerを登録
         const registration = await navigator.serviceWorker.register('/service-worker.js');
         
-        // 進捗表示用のタイマー
-        let progress = 0;
-        const progressInterval = setInterval(() => {
-            progress += 5;
-            if (progress < 100) {
-                statusElement.textContent = `サービスワーカーを登録中... ${progress}%`;
-            }
-        }, 300);
-        
         // Service Workerがアクティブになるのを待つ
-        await new Promise(resolve => {
+        await new Promise((resolve, reject) => {
             if (registration.active) {
                 resolve();
             } else {
-                registration.addEventListener('updatefound', () => {
-                    const newWorker = registration.installing;
-                    newWorker.addEventListener('statechange', () => {
-                        if (newWorker.state === 'activated') {
+                const worker = registration.installing || registration.waiting;
+                if (worker) {
+                    worker.addEventListener('statechange', () => {
+                        if (worker.state === 'activated') {
                             resolve();
+                        } else if (worker.state === 'rejected') {
+                            reject(new Error('Service Workerの登録が拒否されました'));
                         }
                     });
-                });
+                } else {
+                    registration.addEventListener('updatefound', () => {
+                        const newWorker = registration.installing;
+                        newWorker.addEventListener('statechange', () => {
+                            if (newWorker.state === 'activated') {
+                                resolve();
+                            } else if (newWorker.state === 'rejected') {
+                                reject(new Error('Service Workerの登録が拒否されました'));
+                            }
+                        });
+                    });
+                }
             }
         });
 
-        clearInterval(progressInterval);
-        
-        // Service Workerにキャッシュするファイルを送信
+        // キャッシュするファイルをService Workerに送信
         registration.active.postMessage({
             type: 'CACHE_FILES',
             files: filesToCache,
             checkboxStates: checkboxStates
         });
 
-        statusElement.textContent = "サービスワーカーが正常に登録されました";
+        // キャッシュが完了するのを待つ
+        statusElement.textContent = "ファイルをキャッシュ中...";
+        
+        // キャッシュが完了したか確認する
+        await verifyCache(filesToCache);
+        
+        statusElement.textContent = "サービスワーカーが正常に登録され、ファイルがキャッシュされました";
         registerBtn.disabled = false;
     } catch (error) {
         console.error('Service Worker登録エラー:', error);
@@ -1028,7 +1034,30 @@ async function registerServiceWorker() {
         registerBtn.disabled = false;
     }
 }
-
+  async function verifyCache(filesToCache) {
+    const maxAttempts = 10;
+    const delay = 500; // 500msごとに確認
+    
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+        const cache = await caches.open('media-player-cache-v1');
+        const cachedRequests = await cache.keys();
+        const cachedUrls = cachedRequests.map(request => request.url.replace(location.origin, ''));
+        
+        // ��べてのファイルがキャッシュされているか確認
+        const allCached = filesToCache.every(file => cachedUrls.includes(file));
+        
+        if (allCached) {
+            return true;
+        }
+        
+        // 最後の試行でなければ待機
+        if (attempt < maxAttempts) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+        }
+    }
+    
+    throw new Error('キャッシュが完了しませんでした');
+}
 async function restoreCheckboxStates() {
     try {
         const cache = await caches.open('settings-cache');