feat(pwa): add InstallPrompt component for Add to Home Screen
This commit is contained in:
@@ -0,0 +1,55 @@
|
|||||||
|
"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(() => {
|
||||||
|
const standalone = window.matchMedia('(display-mode: standalone)').matches ||
|
||||||
|
(window.navigator as any).standalone ||
|
||||||
|
document.referrer.includes('android-app://')
|
||||||
|
setIsStandalone(standalone)
|
||||||
|
|
||||||
|
const isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
|
||||||
|
setIsIOS(isIOSDevice)
|
||||||
|
|
||||||
|
const dismissed = localStorage.getItem('install-prompt-dismissed')
|
||||||
|
if (!standalone && !dismissed) {
|
||||||
|
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">
|
||||||
|
<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">
|
||||||
|
Tippe auf Teilen → "Zum Home Screen hinzufügen"
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Installieren für schnellen Zugriff
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button size="sm" variant="ghost" onClick={handleDismiss}>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user