Show a reload banner when a new version has deployed (#28)

The service worker already auto-updates in the background (registerType: 'autoUpdate' + an unconditional self.skipWaiting()), but that just silently swaps the SW -- nothing ever told an already-open tab its already-loaded JS had fallen behind, so a long-lived tab could run a stale build indefinitely. Switched registerType to 'prompt': a new SW now installs and waits rather than taking over immediately, activating only when the page explicitly asks (sw.ts's skipWaiting is now conditional on a SKIP_WAITING message instead of unconditional). UpdateBanner.tsx uses vite-plugin-pwa's virtual:pwa-register/react hook to surface that as a small banner with a Reload button, and polls for updates hourly so a tab that never navigates still notices eventually. Verified a fresh install shows no banner (correct baseline) and the code follows the documented registerType: 'prompt' pattern exactly. Could not get this sandbox's browser to actually detect a swapped service-worker file via registration.update() during testing -- confirmed via direct inspection that the server serves the new content correctly and ruled out timing, so this looks like an update-check limitation specific to this automated browser environment rather than a bug; the real test is the next live deploy. Also adds a "frontend-preview" launch.json entry (npm run preview) -- the only way to exercise the real production service worker locally, same reasoning as vite.config.ts's existing `preview.proxy` section. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-16 16:13:05 -06:00
parent ccd92787d6
commit e9ad5d832b
7 changed files with 110 additions and 2 deletions
@@ -0,0 +1,43 @@
+import { useRegisterSW } from 'virtual:pwa-register/react'
+import './UpdateBanner.css'
+
+// The service worker (registerType: 'prompt', sw.ts) already installs and
+// caches a new version silently in the background -- but a long-lived tab
+// never navigates, and a page only checks for a new SW on navigation by
+// default, so a tab left open for hours could sit on a stale check
+// indefinitely. This polls explicitly so "reload available" shows up
+// without the user having to close and reopen the app first.
+const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+
+export function UpdateBanner() {
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(_url, registration) {
+      if (!registration) return
+      setInterval(() => registration.update(), UPDATE_CHECK_INTERVAL_MS)
+    },
+  })
+
+  if (!needRefresh) return null
+
+  return (
+    <div className="update-banner" role="status">
+      <span>A new version of DS Chat is available.</span>
+      <div className="update-banner-actions">
+        <button type="button" className="btn-primary" onClick={() => updateServiceWorker(true)}>
+          Reload
+        </button>
+        <button
+          type="button"
+          className="update-banner-dismiss"
+          onClick={() => setNeedRefresh(false)}
+          aria-label="Dismiss"
+        >
+          &times;
+        </button>
+      </div>
+    </div>
+  )
+}