From 43e826448816d5dfb3d91ecd252fe7c2fbea67ae Mon Sep 17 00:00:00 2001 From: jtricerolph Date: Thu, 6 Aug 2026 14:12:12 +0000 Subject: [PATCH] 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 --- frontend/index.html | 5 ++ frontend/src/App.tsx | 2 + frontend/src/components/IosInstallHint.tsx | 89 ++++++++++++++++++++++ frontend/src/main.tsx | 9 +++ 4 files changed, 105 insertions(+) create mode 100644 frontend/src/components/IosInstallHint.tsx diff --git a/frontend/index.html b/frontend/index.html index e8abde2..bfb178c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,6 +3,11 @@ + + + + + Twin Optimiser diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 833300f..d7b5e8b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,7 @@ 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' @@ -29,6 +30,7 @@ export default function App() { + ) } diff --git a/frontend/src/components/IosInstallHint.tsx b/frontend/src/components/IosInstallHint.tsx new file mode 100644 index 0000000..da58dd2 --- /dev/null +++ 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 ( +
+
+ + +
+ {mode === 'safari' + ? + : } +
+ + {mode === 'safari' ? ( +

+ To install this app, tap the Share icon in Safari's + toolbar, then choose Add to Home Screen. +

+ ) : ( +

+ iOS only allows installing apps from Safari. Open this + page in Safari, then tap Share → Add to Home Screen. +

+ )} +
+
+ ) +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 520b520..f60c9da 100644 --- 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 }).prompt() + }, { once: true }) +} + createRoot(document.getElementById('root')!).render(