feat: ensure ui automatically updates regardless of version number

Task #53 completed by ClaudeQueue

ClaudeQueue

frontend/app.js

@@ -1704,14 +1704,9 @@ async function renderSettings() {
     const btn = $('refreshUiBtn');
     btn.disabled = true;
     btn.textContent = 'Refreshing…';
-    try {
-      await Promise.all([
-        fetch('/', { cache: 'reload' }),
-        fetch('/app.js', { cache: 'reload' }),
-        fetch('/app.css', { cache: 'reload' }),
-      ]);
-    } catch { /* network hiccup — reload anyway */ }
-    location.reload();
+    // hardReloadUI() deletes all caches and unregisters the SW so the
+    // next page load always fetches fresh assets from the network.
+    await hardReloadUI();
   });
 
   $('resetAppBtn').addEventListener('click', () => {
@@ -2796,53 +2791,70 @@ function pollBuildTag() {
 // PWA — service worker registration and update banner (WEB mode only)
 // ============================================================================
 
+// Hard-reload helper: wipes every SW cache and unregisters the SW so the
+// next page load fetches fresh assets from the network, not stale cache.
+// Called from both the update dialog and the Settings → Force refresh UI button.
+async function hardReloadUI() {
+  try {
+    // 1. Delete every named cache (app shell, thumbs, fonts, etc.)
+    if ('caches' in window) {
+      const keys = await caches.keys();
+      await Promise.all(keys.map((k) => caches.delete(k)));
+    }
+    // 2. Unregister every service worker registration so the browser
+    //    fetches sw.js fresh on the next load rather than serving a
+    //    cached copy that could re-populate the caches.
+    if ('serviceWorker' in navigator) {
+      const regs = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(regs.map((r) => r.unregister()));
+    }
+  } catch { /* best effort — reload regardless */ }
+  // Hard navigation to the root forces the browser to fetch index.html from
+  // the network (no SW is registered any more to intercept it).
+  window.location.href = window.location.origin + '/';
+}
+
 let _updateBannerShown = false;
-function showUpdateBanner(waitingSW) {
-  // Only show the banner once per page load
+function showUpdateBanner() {
+  // Only show the dialog once per page load
   if (_updateBannerShown) return;
   _updateBannerShown = true;
 
-  // Use a persistent, click-to-reload toast instead of the standard 2.2s one
-  const t = document.createElement('div');
-  t.className = 'toast toast-update';
-  t.innerHTML = '⬆ Update ready — <button class="toast-reload-btn">Reload now</button>';
-  const container = $('toastContainer');
-  container.appendChild(t);
-  t.querySelector('.toast-reload-btn').addEventListener('click', () => {
-    if (waitingSW) {
-      // Signal the *waiting* SW (not the active controller) to take over.
-      // Once it does, controllerchange fires and we reload.
-      waitingSW.postMessage({ type: 'SKIP_WAITING' });
-      navigator.serviceWorker.addEventListener('controllerchange', () => window.location.reload(), { once: true });
-    } else {
-      // No waiting SW (e.g. build-tag or SW_UPDATE_AVAILABLE path) — just reload.
-      window.location.reload();
-    }
-  });
+  // Show a modal dialog instead of a fleeting toast so the user can't miss it.
+  const body = document.createElement('p');
+  body.textContent = 'A new version of YT Player is available. Click "Refresh UI" to reload the page with the latest build. All your playlists and history are stored locally and will be preserved.';
+  showModal('⬆ Update available', body, [
+    { label: 'Later', onClick: closeModal },
+    { label: 'Refresh UI', primary: true, onClick: async () => {
+      closeModal();
+      await hardReloadUI();
+    }},
+  ]);
 }
 
 async function registerServiceWorker() {
   if (!WEB || !('serviceWorker' in navigator)) return;
   try {
-    const reg = await navigator.serviceWorker.register('/sw.js');
+    // updateViaCache:'none' prevents the browser from serving a stale
+    // cached copy of sw.js — the server always returns it fresh (no-store).
+    const reg = await navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' });
 
     // If a new SW is already waiting (e.g. user refreshed after an update),
-    // show the banner right away.
-    if (reg.waiting) { showUpdateBanner(reg.waiting); return; }
+    // show the dialog right away.
+    if (reg.waiting) { showUpdateBanner(); return; }
 
     // Listen for a new SW installing after the page is open.
     reg.addEventListener('updatefound', () => {
       const sw = reg.installing;
       if (!sw) return;
       sw.addEventListener('statechange', () => {
-        if (sw.state === 'installed' && reg.waiting) showUpdateBanner(reg.waiting);
+        if (sw.state === 'installed' && reg.waiting) showUpdateBanner();
       });
     });
 
     // The SW can also broadcast SW_UPDATE_AVAILABLE on its own activate.
-    // In this case the new SW is already active, so just reload directly.
     navigator.serviceWorker.addEventListener('message', (e) => {
-      if (e.data && e.data.type === 'SW_UPDATE_AVAILABLE') showUpdateBanner(null);
+      if (e.data && e.data.type === 'SW_UPDATE_AVAILABLE') showUpdateBanner();
     });
 
     // Check for updates in the background (useful for long-lived sessions)