jtricerolph
9a8d7b40f0
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. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
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>
|
|
)
|
|
}
|