diff --git a/frontend/index.html b/frontend/index.html
index 91fb381..d5b1446 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,11 @@
+
+
+
+
+
Kitchen
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 40d26da..ae419ee 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import AuthGate, { useAuth } from './components/AuthGate'
import { UpdateBanner } from './components/UpdateBanner'
+import IosInstallHint from './components/IosInstallHint'
import { useVersionCheck } from './hooks/useVersionCheck'
import Layout from './components/Layout'
import { can } from './types'
@@ -115,6 +116,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 285e9cc..381f106 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -9,6 +9,15 @@ const qc = new QueryClient({
defaultOptions: { queries: { staleTime: 5 * 60 * 1000, retry: 1 } },
})
+// 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 })
+}
+
ReactDOM.createRoot(document.getElementById('root')!).render(