Update sender.html

sender.html

@@ -865,7 +865,7 @@
             <hr>
             
             <h3>プレイヤーの使い方</h3>
-            <p>「▶」や「⏸」ボタンで再生や一時停止ができます。「↺」で最初から再生できます。音量スライダーで音量を変更できます。スライダーで再生速度も変更できます。「⇲」で、動画を小さく表示し、他のタブに移動しながら見れるようにします。「⛶」で動画を全画面で表示できます。</p>
+            <p>「▶」や「⏸」ボタンで再生や一時停止ができます。「↺」で最初から再生できます。音量スライダーで音量を変更できます。スライダーで再生速度も変更できます。</p>
             
             <hr>
             
@@ -878,7 +878,6 @@
             
             <h3>高度な設定</h3>
             <ul>
-                <li>消画モード：画面を消すことができます。</li>
                 <li>全体音量係数：全体の音量を上げたり下げたりできます。10が最大です。</li>
                 <li>再生速度：再生速度を変更できます。</li>
                 <li>テンポ：テンポを入力すると、そのテンポになるように再生速度を自動調整します。</li>
@@ -908,6 +907,18 @@
         
     </script>
         <div class="audio-controls">
+        <details>
+            <summary style="font-size: 1.2em;">オフライン設定</summary>
+            <div class="swsettings" id="swsettings">
+                <a>下のボタンを押すと、サービスワーカーでページをオフラインで使用できるようにします。<br>
+                    ブラウザの仕様により、オフラインで開く際に<b>最初のみ二回再読み込みボタンを押さなければいけません。</b><br>
+                    不安定な機能で、ページの更新などができなくなるバグが発生する可能性があります。</a>
+                <br>
+                <button class="combine-button" id="sw-register-btn" disabled>登録を開始</button>
+                <div class="combine-status" id="sw-status">
+                </div>
+            </div>
+        </details><br>
             <h2>音声コントロール</h2>
             <span>各パートの音の大きさを設定できます。自分のパートの音量を1、それ以外のパートの音量を0.3くらいにすると他のパートのタイミングを確認しながら練習できます。<br>
                 ※「ピアノ」と「全体」は他のパートと音がずれるため、組み合わせて使用しないでください。</span>
@@ -1053,7 +1064,224 @@
                 <br>楽譜に記載された「♪=」の横のテンポ(時の旅人は約92、地球星歌は約66)を基準に計算します。</span>
         </div>
     </div>
-
+    <script>
+        window.addEventListener('load', async () => {
+            const statusElem = document.getElementById('sw-status');
+            const registerBtn = document.getElementById('sw-register-btn');
+            const UPDATE_URL = '/update.txt';
+            const LS_SW_VERSION = 'sw_version';
+            const LS_LAST_SEEN = 'last_seen_update_txt';
+            const CHECK_INTERVAL_MS = 30000;
+            const SKIP_WAITING_TIMEOUT_MS = 8000;
+            
+            const log = (v) => { console.log(v); try { if(statusElem) statusElem.textContent = String(v); } catch (e) {} };
+            const err = (m, e) => { console.error(m, e); try { if(statusElem) statusElem.textContent = m + (e?.message ? (' — ' + e.message) : ''); } catch (_) {} };
+            
+            if(!('serviceWorker' in navigator)) {
+                err('このブラウザは Service Worker に対応していません。');
+                if(registerBtn) registerBtn.disabled = true;
+                return;
+            }
+            if(registerBtn) registerBtn.disabled = false;
+            
+            // CSS
+            if(!document.getElementById('sw-update-style')) {
+                const style = document.createElement('style');
+                style.id = 'sw-update-style';
+                style.textContent = `.sw-popup{position:fixed;top:20px;right:20px;background:#fff3cd;color:#856304;border:1px solid #ffeeba;border-radius:8px;padding:16px;z-index:10000;width:320px;font-family:sans-serif}
+.sw-popup .close{position:absolute;top:6px;right:8px;background:none;border:none;font-weight:bold;cursor:pointer}
+.sw-popup .primary{display:block;margin-top:12px;padding:8px;border:none;background:#ffc107;border-radius:4px;width:100%;cursor:pointer}
+.sw-popup .secondary{display:block;margin-top:8px;padding:6px;border:1px solid #ddd;background:#fff;border-radius:4px;width:100%;cursor:pointer}`;
+                document.head.appendChild(style);
+            }
+            
+            // popup queue
+            const queue = [];
+            let showing = false;
+            
+            function enqueue(type, payload = {}) { queue.push({ type, payload });
+                showNext(); }
+            
+            function showNext() { if(showing || !queue.length) return; const it = queue.shift();
+                showing = true;
+                show(it.type, it.payload).finally(() => { showing = false;
+                    setTimeout(showNext, 200); }); }
+            
+            function show(type, payload) {
+                return new Promise(resolve => {
+                    const pop = document.createElement('div');
+                    pop.className = 'sw-popup';
+                    pop.setAttribute('data-type', type);
+                    let title = '更新',
+                        body = '更新があります。';
+                    if(type === 'reload') { title = 'ページ更新が必要です';
+                        body = 'ページが新しくなりました。再読み込みしてください。'; } else if(type === 'sw-update') { title = 'Service Worker の更新';
+                        body = '新しい Service Worker が利用可能です。反映するには更新してください。'; }
+                    pop.innerHTML = `<button class="close" aria-label="閉じる">×</button><strong>${title}</strong><p style="margin:10px 0 0">${body}</p><div><button class="primary">${payload.primaryText|| (type==='sw-update'?'サービスワーカーを更新する':'再読み込み')}</button><button class="secondary">${payload.secondaryText||'後で'}</button></div>`;
+                    document.body.appendChild(pop);
+                    pop.querySelector('.close').addEventListener('click', () => { pop.remove();
+                        resolve(); });
+                    pop.querySelector('.secondary').addEventListener('click', () => { pop.remove();
+                        resolve(); });
+                    
+                    const primary = pop.querySelector('.primary');
+                    
+                    if(type === 'reload') {
+                        primary.addEventListener('click', () => location.reload());
+                    } else if(type === 'sw-update') {
+                        primary.addEventListener('click', async () => {
+                            primary.disabled = true;
+                            try {
+                                log('Service Worker 更新処理を開始します...');
+                                const reg = await navigator.serviceWorker.getRegistration();
+                                // まず、サーバに問い合わせて sw.js を更新取得してもらう（reg.update）
+                                if(reg) {
+                                    try { await reg.update();
+                                        log('reg.update() を呼び出しました。'); } catch (e) { console.warn('reg.update() エラー', e); }
+                                } else {
+                                    log('registration が見つかりません。');
+                                }
+                                
+                                // waiting または installing を監視して installed になったら skipWaiting を送る
+                                let handled = false;
+                                const attemptHandle = async () => {
+                                    const r = await navigator.serviceWorker.getRegistration();
+                                    if(!r) return;
+                                    if(r.waiting) {
+                                        log('waiting を発見: skipWaiting を送信します。');
+                                        r.waiting.postMessage({ type: 'SKIP_WAITING' });
+                                        handled = true;
+                                        // controllerchange を待つ
+                                        navigator.serviceWorker.addEventListener('controllerchange', function oncc() {
+                                            navigator.serviceWorker.removeEventListener('controllerchange', oncc);
+                                            (async () => {
+                                                // activated されてから最新の update.txt を保存
+                                                const latest = await fetchVersion();
+                                                if(latest) {
+                                                    localStorage.setItem(LS_SW_VERSION, latest);
+                                                    log('sw_version を保存しました: ' + latest);
+                                                }
+                                                setTimeout(() => location.reload(), 400);
+                                            })();
+                                        });
+                                        return;
+                                    }
+                                    if(r.installing) {
+                                        log('installing を監視します...');
+                                        r.installing.addEventListener('statechange', function onsc() {
+                                            if(r.installing.state === 'installed') {
+                                                r.installing.removeEventListener('statechange', onsc);
+                                                if(r.waiting) {
+                                                    r.waiting.postMessage({ type: 'SKIP_WAITING' });
+                                                }
+                                            }
+                                        });
+                                        return;
+                                    }
+                                };
+                                
+                                await attemptHandle();
+                                
+                                // タイムアウトしてもフォールバック
+                                setTimeout(async () => {
+                                    if(!handled) {
+                                        log('waiting の応答がありません。フォールバックで update.txt を保存してリロードします。');
+                                        const latest = await fetchVersion();
+                                        if(latest) {
+                                            localStorage.setItem(LS_SW_VERSION, latest);
+                                            log('sw_version を保存しました（フォールバック）: ' + latest);
+                                        }
+                                        location.reload();
+                                    }
+                                }, SKIP_WAITING_TIMEOUT_MS);
+                                
+                            } catch (e) {
+                                err('sw-update 処理でエラー', e);
+                                const latest = await fetchVersion();
+                                if(latest) localStorage.setItem(LS_SW_VERSION, latest);
+                                location.reload();
+                            }
+                        });
+                    } else {
+                        primary.addEventListener('click', () => { pop.remove();
+                            resolve(); });
+                    }
+                });
+            }
+            
+            // fetch update.txt
+            async function fetchVersion() {
+                try {
+                    const r = await fetch(UPDATE_URL + '?t=' + Date.now(), { cache: 'no-store' });
+                    if(r.ok) return (await r.text()).trim();
+                } catch (e) { console.warn('update.txt fetch failed', e); }
+                return null;
+            }
+            
+            // メインロジック
+            let lastSeen = localStorage.getItem(LS_LAST_SEEN) || null;
+            
+            async function check() {
+                const latest = await fetchVersion();
+                if(!latest) return;
+                // ページの「最後に見たupdate.txt」と違えば reload を提示
+                if(lastSeen && latest !== lastSeen) {
+                    enqueue('reload');
+                }
+                lastSeen = latest;
+                localStorage.setItem(LS_LAST_SEEN, latest);
+                
+                // sw_version と最新が違えば sw-update を提示（controller に依存しない）
+                const swv = localStorage.getItem(LS_SW_VERSION);
+                if(swv && swv !== latest) {
+                    enqueue('sw-update');
+                }
+            }
+            
+            // 初回
+            (async () => {
+                const latest = await fetchVersion();
+                if(latest) {
+                    if(!lastSeen) {
+                        lastSeen = latest;
+                        localStorage.setItem(LS_LAST_SEEN, latest);
+                    }
+                    const swv = localStorage.getItem(LS_SW_VERSION);
+                    if(swv && swv !== latest) enqueue('sw-update');
+                }
+                setInterval(check, CHECK_INTERVAL_MS);
+            })();
+            
+            // register ボタンを押したら sw を登録して sw_version を保存
+            if(registerBtn) {
+                registerBtn.addEventListener('click', async () => {
+                    registerBtn.disabled = true;
+                    try {
+                        log('既存の Service Worker を unregister...');
+                        const regs = await navigator.serviceWorker.getRegistrations();
+                        for(const r of regs) await r.unregister();
+                        log('registering...');
+                        await navigator.serviceWorker.register('/sw.js');
+                        const newv = await fetchVersion();
+                        if(newv) {
+                            localStorage.setItem(LS_SW_VERSION, newv);
+                            log('sw_version を保存: ' + newv);
+                        } else {
+                            log('update.txt を取得できませんでし��（sw_version 保存不可）。');
+                        }
+                        registerBtn.textContent = 'ページをリロード';
+                        registerBtn.disabled = false;
+                        registerBtn.onclick = () => location.reload();
+                    } catch (e) {
+                        err('登録失敗', e);
+                        registerBtn.disabled = false;
+                    }
+                });
+            }
+            
+        });
+        
+    </script>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         // 同期管理用の変数