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

2025-10-07 13:41:03 +02:00
parent 14d0c2f9c3
commit 8aea5bb400
2 changed files with 107 additions and 2 deletions
--- a/src/client/components/pwa-install-prompt.tsx
+++ b/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;
+