From e9ad5d832b1c7fce6faffe5d5871f403074d1222 Mon Sep 17 00:00:00 2001 From: Keith Smith Date: Sun, 16 Aug 2026 16:13:05 -0600 Subject: [PATCH] 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 --- .claude/launch.json | 6 ++++ frontend/src/App.tsx | 2 ++ frontend/src/components/UpdateBanner.css | 38 +++++++++++++++++++++ frontend/src/components/UpdateBanner.tsx | 43 ++++++++++++++++++++++++ frontend/src/sw.ts | 13 ++++++- frontend/src/vite-env.d.ts | 2 ++ frontend/vite.config.ts | 8 ++++- 7 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/UpdateBanner.css create mode 100644 frontend/src/components/UpdateBanner.tsx create mode 100644 frontend/src/vite-env.d.ts diff --git a/.claude/launch.json b/.claude/launch.json index 0e8d684..ddda633 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -6,6 +6,12 @@ "runtimeExecutable": "npm", "runtimeArgs": ["--prefix", "frontend", "run", "dev"], "port": 5173 + }, + { + "name": "frontend-preview", + "runtimeExecutable": "npm", + "runtimeArgs": ["--prefix", "frontend", "run", "preview"], + "port": 4173 } ] } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7ebec05..607e35a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom' import { AuthProvider } from './context/AuthContext' import { AdminRoute } from './components/AdminRoute' import { ProtectedRoute } from './components/ProtectedRoute' +import { UpdateBanner } from './components/UpdateBanner' import { LoginPage } from './pages/LoginPage' import { SignupPage } from './pages/SignupPage' import { ForgotPasswordPage } from './pages/ForgotPasswordPage' @@ -12,6 +13,7 @@ import { AdminPage } from './pages/AdminPage' function App() { return ( + } /> } /> diff --git a/frontend/src/components/UpdateBanner.css b/frontend/src/components/UpdateBanner.css new file mode 100644 index 0000000..3014d01 --- /dev/null +++ b/frontend/src/components/UpdateBanner.css @@ -0,0 +1,38 @@ +.update-banner { + flex: none; + display: flex; + align-items: center; + justify-content: center; + gap: var(--sp-4); + background: color-mix(in srgb, var(--ds-accent) 16%, var(--ds-surface)); + color: var(--ds-text); + border-bottom: 1px solid var(--ds-border); + font-size: 0.8rem; + font-weight: 600; + padding: 6px var(--sp-4); +} + +.update-banner .btn-primary { + padding: 4px 14px; + font-size: 0.78rem; +} + +.update-banner-actions { + display: flex; + align-items: center; + gap: var(--sp-2); +} + +.update-banner-dismiss { + background: transparent; + border: none; + color: var(--ds-muted); + font-size: 1rem; + line-height: 1; + cursor: pointer; + padding: 2px 4px; +} + +.update-banner-dismiss:hover { + color: var(--ds-text); +} diff --git a/frontend/src/components/UpdateBanner.tsx b/frontend/src/components/UpdateBanner.tsx new file mode 100644 index 0000000..df5a093 --- /dev/null +++ b/frontend/src/components/UpdateBanner.tsx @@ -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 ( +
+ A new version of DS Chat is available. +
+ + +
+
+ ) +} diff --git a/frontend/src/sw.ts b/frontend/src/sw.ts index 56b2e8a..4fe32af 100644 --- a/frontend/src/sw.ts +++ b/frontend/src/sw.ts @@ -7,7 +7,18 @@ import { NetworkFirst, NetworkOnly } from 'workbox-strategies' declare let self: ServiceWorkerGlobalScope -self.skipWaiting() +// registerType 'prompt' (vite.config.ts) means a newly-installed SW waits +// in the "waiting" state, still fully cached and ready, rather than +// unconditionally taking over -- it only activates once the page explicitly +// asks (UpdateBanner.tsx's updateServiceWorker(), which posts this message) +// after the user chooses to reload. Without this listener, skipWaiting() +// would need to run unconditionally at install time, defeating the point +// of asking first. +self.addEventListener('message', (event) => { + if (event.data?.type === 'SKIP_WAITING') { + self.skipWaiting() + } +}) cleanupOutdatedCaches() // The app shell -- same effect generateSW gave us automatically in Phase 3. diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts new file mode 100644 index 0000000..ec878b7 --- /dev/null +++ b/frontend/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 22c2037..b54a58b 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -21,7 +21,13 @@ export default defineConfig({ // precache should contain. globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest}'], }, - registerType: 'autoUpdate', + // 'autoUpdate' silently activates a new service worker (and its + // stale-relative-to-the-new-JS already-loaded page) with nothing + // telling the user their currently-open tab has fallen behind -- + // 'prompt' leaves activation to an explicit updateServiceWorker() + // call (UpdateBanner.tsx), so the user gets a "reload for the latest + // version" banner instead of silently running old code indefinitely. + registerType: 'prompt', manifest: { name: 'DS Chat', short_name: 'DS Chat',