Prompt to reload when a new version is available

The service worker used to skipWaiting() on install and claim clients on activate, so a new build's assets swapped in silently and a long-open tab kept running stale JS. Switch to the standard update flow: the worker now waits until the page sends it a SKIP_WAITING message, and the page shows a "A new version is available — Reload / Later" banner when a new worker reaches "installed" while one is already controlling the tab (that controller check suppresses the first-install prompt). Reload posts SKIP_WAITING and reloads on controllerchange (guarded against a reload loop and against the initial clients.claim on a fresh install); Later dismisses until the next update. Since browsers only auto-check on navigation, also poll registration.update() hourly and on visibilitychange. Bump the cache to v9 so the old cache is cleaned up on activate.
2026-07-10 12:30:30 +00:00
parent 9c0427a1ec
commit dbcac0653e
4 changed files with 115 additions and 4 deletions
@@ -21,6 +21,17 @@
    </script>
  </head>
  <body>
+    <!-- Shown when a newer build's service worker is waiting. "Reload" activates
+         it and refreshes onto the new assets; "Later" dismisses until next time.
+         Suppressed on the very first install (see app.js). -->
+    <div id="update-banner" class="update-banner" hidden role="status" aria-live="polite">
+      <span class="update-banner-msg">A new version is available</span>
+      <span class="update-banner-actions">
+        <button type="button" id="update-reload" class="update-banner-btn">Reload</button>
+        <button type="button" id="update-later" class="update-banner-btn ghostish">Later</button>
+      </span>
+    </div>
+
    <!-- Login / register gate. Shown until the session check succeeds; the app
         (#app) stays hidden behind it so no puppy data paints while logged out. -->
    <div id="auth-screen" class="auth-screen" hidden>