From 06d1d01f91dc84c44b902e16d2c68251e2237d47 Mon Sep 17 00:00:00 2001 From: jtricerolph Date: Mon, 20 Jul 2026 22:28:08 +0000 Subject: [PATCH] Add PWA manifest + update banner to maintenance app Wire up vite-plugin-pwa so Docker builds generate the web manifest and service worker (was missing, causing installs to show portal icon). Adds UpdateBanner with version-based polling via health endpoint. Co-Authored-By: Claude Sonnet 4.6 --- backend/src/index.js | 3 +- frontend/package.json | 3 +- frontend/src/App.tsx | 40 ++++++++++++--------- frontend/src/components/UpdateBanner.tsx | 44 ++++++++++++++++++++++++ frontend/src/hooks/useVersionCheck.ts | 43 +++++++++++++++++++++++ frontend/vite.config.ts | 26 +++++++++++++- 6 files changed, 139 insertions(+), 20 deletions(-) create mode 100644 frontend/src/components/UpdateBanner.tsx create mode 100644 frontend/src/hooks/useVersionCheck.ts diff --git a/backend/src/index.js b/backend/src/index.js index fb072b2..46690ad 100644 --- a/backend/src/index.js +++ b/backend/src/index.js @@ -20,6 +20,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url)) const UPLOADS_DIR = join(__dirname, '..', 'uploads') const app = Fastify({ logger: true, trustProxy: true }) +const startedAt = Date.now() await app.register(cookie) await app.register(cors, { @@ -33,7 +34,7 @@ await app.register(staticFiles, { decorateReply: false, }) -app.get('/health', async () => ({ status: 'healthy' })) +app.get('/health', async () => ({ status: 'healthy', version: process.env.BUILD_VERSION || String(startedAt) })) await app.register(locationRoutes) await app.register(taskRoutes) diff --git a/frontend/package.json b/frontend/package.json index 4e71fbb..d0129ef 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", "typescript": "^5.7.2", - "vite": "^6.0.5" + "vite": "^6.0.5", + "vite-plugin-pwa": "^1.3.0" } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 20deaf0..94e1ea6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' import AuthGate from './components/AuthGate' +import { UpdateBanner } from './components/UpdateBanner' +import { useVersionCheck } from './hooks/useVersionCheck' import Layout from './components/Layout' import Summary from './pages/Summary' import HistoryPage from './pages/History' @@ -10,23 +12,27 @@ import Locations from './pages/Locations' import Settings from './pages/Settings' export default function App() { + const updateAvailable = useVersionCheck('/maintenance/health') return ( - - - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - - + <> + + + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + + + ) } diff --git a/frontend/src/components/UpdateBanner.tsx b/frontend/src/components/UpdateBanner.tsx new file mode 100644 index 0000000..b492c67 --- /dev/null +++ b/frontend/src/components/UpdateBanner.tsx @@ -0,0 +1,44 @@ +import { RefreshCw } from 'lucide-react' + +export function UpdateBanner({ visible }: { visible: boolean }) { + if (!visible) return null + return ( +
+ A new version is available. + +
+ ) +} diff --git a/frontend/src/hooks/useVersionCheck.ts b/frontend/src/hooks/useVersionCheck.ts new file mode 100644 index 0000000..e4fed28 --- /dev/null +++ b/frontend/src/hooks/useVersionCheck.ts @@ -0,0 +1,43 @@ +import { useEffect, useState } from 'react' + +const POLL_MS = 2 * 60 * 1000 + +export function useVersionCheck(healthUrl: string) { + const [updateAvailable, setUpdateAvailable] = useState(false) + + useEffect(() => { + let seenVersion: string | null = null + + async function check() { + try { + const res = await fetch(healthUrl, { cache: 'no-store' }) + if (!res.ok) return + const data = await res.json() + const v: string | undefined = data.version + if (!v) return + if (seenVersion === null) { + seenVersion = v + } else if (v !== seenVersion) { + setUpdateAvailable(true) + } + } catch { + // network error — skip silently + } + } + + check() + const interval = setInterval(check, POLL_MS) + + function onVisible() { + if (document.visibilityState === 'visible') check() + } + document.addEventListener('visibilitychange', onVisible) + + return () => { + clearInterval(interval) + document.removeEventListener('visibilitychange', onVisible) + } + }, [healthUrl]) + + return updateAvailable +} diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index f29d9b7..814710e 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,7 +1,31 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ base: '/maintenance/', - plugins: [react()], + plugins: [ + react(), + VitePWA({ + registerType: 'autoUpdate', + manifest: { + name: 'Maintenance', + short_name: 'Maint.', + start_url: '/maintenance/', + scope: '/maintenance/', + display: 'standalone', + theme_color: '#b45309', + background_color: '#b45309', + icons: [ + { src: '/maintenance/icons/icon-192.png', sizes: '192x192', type: 'image/png' }, + { src: '/maintenance/icons/icon-512.png', sizes: '512x512', type: 'image/png' }, + ], + }, + workbox: { + navigateFallback: '/maintenance/index.html', + navigateFallbackDenylist: [/\/api\//], + globPatterns: ['**/*.{js,css,html,ico,png,svg}'], + }, + }), + ], })