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>
This commit is contained in:
2026-08-16 16:13:05 -06:00
co-authored by Claude Sonnet 5
parent ccd92787d6
commit e9ad5d832b
7 changed files with 110 additions and 2 deletions
+7 -1
View File
@@ -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',