Add PWA support and mobile optimizations

- 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)
2026-03-26 13:40:54 +01:00
parent 3fefc550fe
commit 824191ce81
6 changed files with 191 additions and 10 deletions
@@ -0,0 +1,63 @@
+"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>
+  )
+}