feat(pwa): add InstallPrompt component for Add to Home Screen

2026-03-26 15:01:26 +01:00
parent 6edff1613c
commit 1314982590
1 changed files with 55 additions and 0 deletions
@@ -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>
+  )
+}