Add iOS install hint + Apple PWA meta tags, fix missing beforeinstallprompt handler

iOS Safari has no beforeinstallprompt API, so the portal's Install button (?install=1) silently did nothing there. IosInstallHint now shows Share -> Add to Home Screen steps on Safari, or a prompt to switch to Safari first if opened in another iOS browser/in-app webview (those can't install PWAs on iOS at all). Also added apple-mobile-web-app-title + apple-touch-icon so the home screen icon isn't a page screenshot, and added the beforeinstallprompt handler that was missing entirely (Android Install button did nothing either). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Add update-available banner + versioned /health endpoint
2026-08-06 14:12:12 +00:00 · 2026-08-06 14:11:32 +00:00
7 changed files with 205 additions and 6 deletions
--- a/backend/src/index.js
+++ b/backend/src/index.js
@ -6,11 +6,12 @@ import { gridRoutes } from './routes/grid.js'
 import { settingsRoutes } from './routes/settings.js'

 const app = Fastify({ logger: true, trustProxy: true })
+const startedAt = Date.now()

 await app.register(cookie)
 await app.register(cors, { origin: process.env.CORS_ORIGIN || false, credentials: true })

-app.get('/health', async () => ({ status: 'healthy' }))
+app.get('/health', async () => ({ status: 'healthy', version: process.env.BUILD_VERSION || String(startedAt) }))

 await app.register(gridRoutes)
 await app.register(settingsRoutes)
--- a/frontend/index.html
+++ b/frontend/index.html
@ -3,6 +3,11 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Twin Optimiser" />
+    <link rel="apple-touch-icon" href="/twin-optimiser/icons/icon-192.png" />
    <meta name="theme-color" content="#c9841a" />
    <title>Twin Optimiser</title>
  </head>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -1,5 +1,8 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthGate } from './components/AuthGate'
+import { UpdateBanner } from './components/UpdateBanner'
+import IosInstallHint from './components/IosInstallHint'
+import { useVersionCheck } from './hooks/useVersionCheck'
 import { Layout } from './components/Layout'
 import { TwinOptimiser } from './pages/TwinOptimiser'
 import { Settings } from './pages/Settings'
@ -18,11 +21,16 @@ function AppRoutes({ user }: { user: User }) {
 }

 export default function App() {
+  const updateAvailable = useVersionCheck('/twin-optimiser/health')
  return (
-    <BrowserRouter basename="/twin-optimiser">
-      <AuthGate>
-        {user => <AppRoutes user={user} />}
-      </AuthGate>
-    </BrowserRouter>
+    <>
+      <BrowserRouter basename="/twin-optimiser">
+        <AuthGate>
+          {user => <AppRoutes user={user} />}
+        </AuthGate>
+      </BrowserRouter>
+      <UpdateBanner visible={updateAvailable} />
+      <IosInstallHint />
+    </>
  )
 }
--- a/frontend/src/components/IosInstallHint.tsx
+++ b/frontend/src/components/IosInstallHint.tsx
@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react'
+import { Share, ExternalLink, X } from 'lucide-react'
+
+function isIos() {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    // iPadOS 13+ reports as 'MacIntel' but has touch support, unlike a real Mac
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+}
+
+function isStandalone() {
+  return window.matchMedia('(display-mode: standalone)').matches ||
+    (window.navigator as unknown as { standalone?: boolean }).standalone === true
+}
+
+// Safari's UA also matches "Safari", so this checks for the other iOS
+// browsers/in-app webviews that spoof it — none of them can add to the
+// home screen; only Safari itself can.
+function isNonSafariIosBrowser() {
+  return /CriOS|FxiOS|EdgiOS|OPiOS|mercury|GSA|DuckDuckGo|Instagram|FBAN|FBAV|Line\//.test(navigator.userAgent)
+}
+
+/**
+ * iOS has no `beforeinstallprompt` API — Safari never fires it, so the
+ * portal's Install button (?install=1) does nothing there. This shows the
+ * manual steps instead: Share -> Add to Home Screen in Safari, or a prompt
+ * to switch to Safari first if the page was opened in another browser/app.
+ */
+export default function IosInstallHint() {
+  const [mode, setMode] = useState<'safari' | 'other' | null>(null)
+
+  useEffect(() => {
+    if (!isIos() || isStandalone()) return
+    if (!new URLSearchParams(window.location.search).has('install')) return
+    setMode(isNonSafariIosBrowser() ? 'other' : 'safari')
+  }, [])
+
+  if (!mode) return null
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 9999,
+      background: 'rgba(15,15,32,0.55)',
+      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
+      padding: '0 16px 24px',
+    }}>
+      <div style={{
+        position: 'relative',
+        width: '100%', maxWidth: '360px',
+        background: 'var(--card-bg)', borderRadius: 'var(--radius)',
+        border: '1px solid var(--card-border)', boxShadow: 'var(--shadow-md)',
+        padding: '20px', textAlign: 'center',
+      }}>
+        <button
+          onClick={() => setMode(null)}
+          aria-label="Dismiss"
+          style={{
+            position: 'absolute', top: '10px', right: '10px',
+            background: 'none', border: 'none', color: 'var(--text-mid)',
+            padding: '4px', cursor: 'pointer', lineHeight: 0,
+          }}
+        >
+          <X size={16} strokeWidth={1.75} />
+        </button>
+
+        <div style={{
+          width: '44px', height: '44px', margin: '0 auto 12px',
+          borderRadius: '50%', background: 'var(--gold)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          {mode === 'safari'
+            ? <Share size={22} strokeWidth={1.75} color="var(--navy)" />
+            : <ExternalLink size={22} strokeWidth={1.75} color="var(--navy)" />}
+        </div>
+
+        {mode === 'safari' ? (
+          <p style={{ fontSize: '14px', color: 'var(--text-dark)', lineHeight: 1.5, margin: 0 }}>
+            To install this app, tap the <strong>Share</strong> icon in Safari's
+            toolbar, then choose <strong>Add to Home Screen</strong>.
+          </p>
+        ) : (
+          <p style={{ fontSize: '14px', color: 'var(--text-dark)', lineHeight: 1.5, margin: 0 }}>
+            iOS only allows installing apps from <strong>Safari</strong>. Open this
+            page in Safari, then tap Share → <strong>Add to Home Screen</strong>.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/UpdateBanner.tsx
+++ 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 (
+    <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>
+  )
+}
--- a/frontend/src/hooks/useVersionCheck.ts
+++ 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
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -3,6 +3,15 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'

+// When opened from the portal's install button (?install=1), trigger the
+// PWA install prompt as soon as the browser offers it (Chrome/Edge only).
+if (new URLSearchParams(window.location.search).has('install')) {
+  window.addEventListener('beforeinstallprompt', e => {
+    e.preventDefault()
+    ;(e as Event & { prompt: () => Promise<void> }).prompt()
+  }, { once: true })
+}
+
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />