Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung

src/client/app.tsx

@@ -16,6 +16,7 @@ import BookingStatusPage from "@/client/components/booking-status-page";
 import ReviewSubmissionPage from "@/client/components/review-submission-page";
 import LegalPage from "@/client/components/legal-page";
 import { ProfileLanding } from "@/client/components/profile-landing";
+import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";
 
 function App() {
   const { user, isLoading, isOwner } = useAuth();
@@ -36,10 +37,15 @@ function App() {
 
   // Handle booking status page
   const path = window.location.pathname;
+  const PwaPrompt = <PWAInstallPrompt />;
+  
   if (path.startsWith('/booking/')) {
     const token = path.split('/booking/')[1];
     if (token) {
-      return <BookingStatusPage token={token} />;
+      return <>
+        {PwaPrompt}
+        <BookingStatusPage token={token} />
+      </>;
     }
   }
 
@@ -47,7 +53,10 @@ function App() {
   if (path.startsWith('/review/')) {
     const token = path.split('/review/')[1];
     if (token) {
-      return <ReviewSubmissionPage token={token} />;
+      return <>
+        {PwaPrompt}
+        <ReviewSubmissionPage token={token} />
+      </>;
     }
   }
 
@@ -381,6 +390,9 @@ function App() {
         )}
       </main>
 
+      {/* PWA Installation Prompt for iOS */}
+      <PWAInstallPrompt hidden={isMobileMenuOpen} />
+
       {/* Footer */}
       <footer className="bg-white border-t border-pink-100 mt-16">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

src/client/components/pwa-install-prompt.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+
+declare global {
+  interface Navigator { standalone?: boolean }
+}
+
+const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
+
+function isIOS(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent || '';
+  const iOS = /iPhone|iPad|iPod/i.test(ua);
+  const iPadOS13Plus = /Macintosh/.test(ua) && 'ontouchend' in document;
+  return iOS || iPadOS13Plus;
+}
+
+function isSafari(): boolean {
+  const ua = navigator.userAgent || '';
+  const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|EdgiOS/i.test(ua);
+  return isSafari;
+}
+
+function isStandalone(): boolean {
+  const navStandalone = (navigator as any)?.standalone === true;
+  const mm = typeof window !== 'undefined' && window.matchMedia
+    ? window.matchMedia('(display-mode: standalone)').matches
+    : false;
+  return Boolean(navStandalone || mm);
+}
+
+export function PWAInstallPrompt({ hidden = false }: { hidden?: boolean }) {
+  if (hidden) return null;
+  const [show, setShow] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    // Only run on client
+    if (typeof window === 'undefined') return;
+
+    const eligible = isIOS() && isSafari() && !isStandalone();
+    if (!eligible) {
+      setInitialized(true);
+      return;
+    }
+
+    let lastShown = 0;
+    try {
+      lastShown = Number(localStorage.getItem(LAST_SHOWN_KEY) || 0);
+    } catch {}
+    const oneWeek = 7 * 24 * 60 * 60 * 1000;
+    const shouldShow = !lastShown || Date.now() - lastShown > oneWeek;
+
+    setShow(shouldShow);
+    setInitialized(true);
+  }, []);
+
+  const dismiss = () => {
+    try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
+    setShow(false);
+  };
+
+  if (!initialized || !show) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label="PWA Installation Anleitung"
+      className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-4"
+      style={{ paddingBottom: `max(env(safe-area-inset-bottom), 1rem)` }}
+    >
+      <div className="relative max-w-3xl mx-auto rounded-xl shadow-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white p-4 sm:p-6">
+        <button aria-label="Hinweis schließen" onClick={dismiss} className="absolute top-2 right-2 text-white/90 hover:text-white text-2xl leading-none">×</button>
+        <div className="flex items-start gap-3">
+          <div className="text-2xl">📱</div>
+          <div className="flex-1">
+            <h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
+            <p className="text-white/90 mb-2">So installierst du Stargirlnails als App auf deinem iPhone/iPad:</p>
+            <ol className="list-decimal pl-5 space-y-1 text-white/95">
+              <li>Öffne diese Seite in Safari (nicht Chrome oder andere Browser).</li>
+              <li>Tippe auf das Teilen-Symbol (□↑) unten in der Mitte.</li>
+              <li>Scrolle nach unten und wähle „Zum Home-Bildschirm".</li>
+              <li>Tippe auf „Hinzufügen".</li>
+            </ol>
+            <p className="mt-3 text-sm text-white/90">✨ Schneller Zugriff, keine App-Store-Installation nötig, automatische Updates.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PWAInstallPrompt;
+