Aufgearbeitet

public/index.html

@@ -2,12 +2,22 @@
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="manifest" href="manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    
+    <!-- PWA Meta Tags -->
+    <link rel="manifest" href="/manifest.json" />
     <meta name="theme-color" content="#ec4899" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    
+    <!-- iOS Specific -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <link rel="apple-touch-icon" href="img/icon-192.png" />
+    <meta name="apple-mobile-web-app-title" content="WhoPays" />
+    <link rel="apple-touch-icon" href="/img/icon-192.png" />
+    
+    <!-- Android Specific -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    
     <title>Wer zahlt?</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
@@ -15,7 +25,20 @@
   <body
     class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-yellow-50 to-pink-50 text-gray-800 p-4"
   >
-    <div class="text-center space-y-8 w-full max-w-md">
+    <!-- Install Banner (shows on compatible devices) -->
+    <div id="installBanner" class="hidden fixed top-0 left-0 right-0 bg-pink-500 text-white p-3 shadow-lg z-50">
+      <div class="max-w-md mx-auto flex items-center justify-between">
+        <span class="text-sm">📱 App installieren für bessere Erfahrung!</span>
+        <div class="space-x-2">
+          <button id="installBtn" class="bg-white text-pink-500 px-3 py-1 rounded-lg text-sm font-medium">
+            Installieren
+          </button>
+          <button id="dismissBtn" class="text-white text-sm">✕</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="text-center space-y-8 w-full max-w-md mt-16">
       <h1 class="text-4xl font-extrabold drop-shadow-sm tracking-tight">
         Who pays?
       </h1>
@@ -65,11 +88,45 @@
 
     <script src="script.js"></script>
     <script>
+    // Service Worker Registration
     if ("serviceWorker" in navigator) {
       navigator.serviceWorker.register("/service-worker.js")
-      .then(() => console.log("Service Worker registriert"))
-      .catch(err => console.error("SW Fehler:", err));
+      .then(reg => console.log("✅ Service Worker registriert", reg.scope))
+      .catch(err => console.error("❌ SW Fehler:", err));
     }
+
+    // PWA Install Prompt
+    let deferredPrompt;
+    const installBanner = document.getElementById("installBanner");
+    const installBtn = document.getElementById("installBtn");
+    const dismissBtn = document.getElementById("dismissBtn");
+
+    window.addEventListener("beforeinstallprompt", (e) => {
+      console.log("✅ PWA installierbar!");
+      e.preventDefault();
+      deferredPrompt = e;
+      installBanner.classList.remove("hidden");
+    });
+
+    installBtn.addEventListener("click", async () => {
+      if (!deferredPrompt) return;
+      
+      deferredPrompt.prompt();
+      const { outcome } = await deferredPrompt.userChoice;
+      console.log(`PWA install: ${outcome}`);
+      
+      deferredPrompt = null;
+      installBanner.classList.add("hidden");
+    });
+
+    dismissBtn.addEventListener("click", () => {
+      installBanner.classList.add("hidden");
+    });
+
+    window.addEventListener("appinstalled", () => {
+      console.log("✅ PWA erfolgreich installiert!");
+      deferredPrompt = null;
+    });
     </script>
 
   </body>