feat: add iOS Safari install guide and improve PWA UX with neutral theme

- Add iOS Safari install prompt with step-by-step modal guide
- Fix Telegram environment detection (check initData, not just SDK presence)
- Fix install prompt re-entrancy issue (clear deferredPrompt immediately)
- Extract icon components to separate file (web/src/components/icons.tsx)
- Rename "Happy App" to "Hapi" throughout the UI and manifests
- Change button/icon colors from blue (--app-button) to neutral theme (--app-fg/--app-bg)
- Add install dismiss state to prevent repeated prompts
- Improve iOS Safari detection with robust user agent parsing
This commit is contained in:
weishu
2025-12-18 14:05:50 +08:00
parent ea9f0f3b1a
commit be00343289
9 changed files with 232 additions and 13 deletions
+8 -2
View File
@@ -68,8 +68,14 @@ function createHaptic(): PlatformHaptic {
// Singleton haptic instance (functions are stable)
const haptic = createHaptic()
function checkIsTelegram(): boolean {
const tg = getTelegramWebApp()
// SDK is always loaded, but initData is only present in actual Telegram environment
return tg !== null && Boolean(tg.initData)
}
export function usePlatform(): Platform {
const isTelegram = useMemo(() => getTelegramWebApp() !== null, [])
const isTelegram = useMemo(() => checkIsTelegram(), [])
return {
isTelegram,
@@ -80,7 +86,7 @@ export function usePlatform(): Platform {
// Non-hook version for use outside React components
export function getPlatform(): Platform {
return {
isTelegram: getTelegramWebApp() !== null,
isTelegram: checkIsTelegram(),
haptic
}
}