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 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-20 22:28:08 +00:00
parent 79eba484e0
commit 06d1d01f91
6 changed files with 139 additions and 20 deletions

View file

@ -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 (
<BrowserRouter basename="/maintenance">
<AuthGate>
<Layout>
<Routes>
<Route path="/" element={<Navigate to="/summary" replace />} />
<Route path="/summary" element={<Summary />} />
<Route path="/history" element={<HistoryPage />} />
<Route path="/assets" element={<Assets />} />
<Route path="/contractors" element={<Contractors />} />
<Route path="/recurring" element={<Recurring />} />
<Route path="/locations" element={<Locations />} />
<Route path="/settings" element={<Settings />} />
<Route path="*" element={<Navigate to="/summary" replace />} />
</Routes>
</Layout>
</AuthGate>
</BrowserRouter>
<>
<BrowserRouter basename="/maintenance">
<AuthGate>
<Layout>
<Routes>
<Route path="/" element={<Navigate to="/summary" replace />} />
<Route path="/summary" element={<Summary />} />
<Route path="/history" element={<HistoryPage />} />
<Route path="/assets" element={<Assets />} />
<Route path="/contractors" element={<Contractors />} />
<Route path="/recurring" element={<Recurring />} />
<Route path="/locations" element={<Locations />} />
<Route path="/settings" element={<Settings />} />
<Route path="*" element={<Navigate to="/summary" replace />} />
</Routes>
</Layout>
</AuthGate>
</BrowserRouter>
<UpdateBanner visible={updateAvailable} />
</>
)
}

View file

@ -0,0 +1,44 @@
import { RefreshCw } from 'lucide-react'
export function UpdateBanner({ visible }: { visible: boolean }) {
if (!visible) return null
return (
<div style={{
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
zIndex: 9999,
background: 'var(--sidebar)',
color: 'var(--text-light)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '12px',
padding: '10px 16px',
fontSize: '14px',
boxShadow: '0 -2px 8px rgba(0,0,0,0.3)',
}}>
<span>A new version is available.</span>
<button
onClick={() => window.location.reload()}
style={{
display: 'flex',
alignItems: 'center',
gap: '6px',
background: 'var(--accent)',
color: 'var(--sidebar)',
border: 'none',
borderRadius: '4px',
padding: '6px 14px',
fontWeight: 600,
cursor: 'pointer',
fontSize: '13px',
}}
>
<RefreshCw size={14} strokeWidth={1.75} />
Reload
</button>
</div>
)
}

View file

@ -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
}