Andrej Spielmann
824191ce81
- Add manifest.json with PWA configuration - Add viewport settings for iOS (viewport-fit: cover) - Add meta tags for iOS Safari (apple-mobile-web-app-capable) - Add mobile CSS optimizations: * iOS Safe Area support * Minimum 44x44px touch targets * Disable zoom on input focus * Remove scrollbars on mobile * Disable hover effects on touch devices * Standalone mode styles - Add InstallPrompt component for Add to Home Screen - Add SVG icon (needs PNG conversion)
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { X } from "lucide-react"
|
|
|
|
export function InstallPrompt() {
|
|
const [show, setShow] = useState(false)
|
|
const [isIOS, setIsIOS] = useState(false)
|
|
const [isStandalone, setIsStandalone] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Prüfe ob bereits als PWA installiert
|
|
const standalone = window.matchMedia('(display-mode: standalone)').matches ||
|
|
(window.navigator as any).standalone ||
|
|
document.referrer.includes('android-app://')
|
|
setIsStandalone(standalone)
|
|
|
|
// Prüfe iOS
|
|
const isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
|
|
setIsIOS(isIOSDevice)
|
|
|
|
// Zeige Prompt nur wenn nicht bereits installiert und nicht bereits geschlossen
|
|
const dismissed = localStorage.getItem('install-prompt-dismissed')
|
|
if (!standalone && !dismissed) {
|
|
// Verzögert anzeigen
|
|
setTimeout(() => setShow(true), 3000)
|
|
}
|
|
}, [])
|
|
|
|
const handleDismiss = () => {
|
|
setShow(false)
|
|
localStorage.setItem('install-prompt-dismissed', 'true')
|
|
}
|
|
|
|
if (!show || isStandalone) return null
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-card border-t shadow-lg safe-area-bottom">
|
|
<div className="flex items-center justify-between max-w-lg mx-auto">
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">
|
|
WrestleDesk als App installieren
|
|
</p>
|
|
{isIOS ? (
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
Tippe auf Teilen → "Zum Home Screen hinzufügen"
|
|
</p>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
Installieren für schnellen Zugriff
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button size="sm" variant="ghost" onClick={handleDismiss}>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|