Update index.html

index.html

@@ -667,7 +667,53 @@ if ('serviceWorker' in navigator) {
     </div>
     
     <h1>高度な音声動画プレイヤー</h1>
-    
+    <div class="settings">
+    <h2>サービスワーカー設定</h2>
+    <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>
+    <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>
+    <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>
+    <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>
+    <button class="combine-button" id="sw-register-btn">登録を開始</button>
+    <div class="combine-status" id="sw-status"></div>
+</div>
     <div class="container">
         <div class="video-container" id="video-container">
             <!-- バッファリングインジケーター -->
@@ -884,7 +930,76 @@ document.addEventListener('DOMContentLoaded', function() {
         console.error(message, error);
         window.alert(`${message}\n\nエラー詳細: ${error.message}`);
     }
+
+  // サービスワーカー登録関数
+async function registerServiceWorker() {
+    const statusElement = document.getElementById('sw-status');
     
+    if (!('serviceWorker' in navigator)) {
+        statusElement.textContent = "このブラウザはService Workerをサポートしていません";
+        return;
+    }
+
+    try {
+        // チェックされたファイルを収集
+        const filesToCache = [];
+        
+        // 基本ファイル
+        if (document.getElementById('sw-index').checked) filesToCache.push('/index.html');
+        if (document.getElementById('sw-root').checked) filesToCache.push('/');
+        
+        // 通常のメディアファイル
+        if (document.getElementById('sw-video').checked) filesToCache.push('/v.mp4');
+        if (document.getElementById('sw-piano').checked) filesToCache.push('/p.mp3');
+        if (document.getElementById('sw-soprano').checked) filesToCache.push('/s.mp3');
+        if (document.getElementById('sw-alto').checked) filesToCache.push('/a.mp3');
+        if (document.getElementById('sw-tenor').checked) filesToCache.push('/t.mp3');
+        if (document.getElementById('sw-combined').checked) filesToCache.push('/k.mp3');
+        
+        // t/ ディレクトリのメディアファイル
+        if (document.getElementById('sw-t-video').checked) filesToCache.push('/t/v.mp4');
+        if (document.getElementById('sw-t-piano').checked) filesToCache.push('/t/p.mp3');
+        if (document.getElementById('sw-t-soprano').checked) filesToCache.push('/t/s.mp3');
+        if (document.getElementById('sw-t-alto').checked) filesToCache.push('/t/a.mp3');
+        if (document.getElementById('sw-t-tenor').checked) filesToCache.push('/t/t.mp3');
+        if (document.getElementById('sw-t-combined').checked) filesToCache.push('/t/k.mp3');
+
+        statusElement.textContent = "サービスワーカーを登録中...";
+        
+        // Service Workerを登録
+        const registration = await navigator.serviceWorker.register('/service-worker.js');
+        
+        // Service Workerがアクティブになるのを待つ
+        await new Promise(resolve => {
+            if (registration.active) {
+                resolve();
+            } else {
+                registration.addEventListener('updatefound', () => {
+                    const newWorker = registration.installing;
+                    newWorker.addEventListener('statechange', () => {
+                        if (newWorker.state === 'activated') {
+                            resolve();
+                        }
+                    });
+                });
+            }
+        });
+
+        // Service Workerにキャッシュするファイルを送信
+        registration.active.postMessage({
+            type: 'CACHE_FILES',
+            files: filesToCache
+        });
+
+        statusElement.textContent = "サービスワーカーが正常に登録されました";
+    } catch (error) {
+        console.error('Service Worker登録エラー:', error);
+        statusElement.textContent = `サービスワーカー登録に失敗しました: ${error.message}`;
+    }
+}
+
+// 登録ボタンにイベントリスナーを追加
+document.getElementById('sw-register-btn').addEventListener('click', registerServiceWorker);
     // 要素を取得
     const video = document.getElementById('video');
     const videoContainer = document.getElementById('video-container');