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>

public/manifest.json

@@ -1,23 +1,40 @@
 {
-  "name": "Who´s gonna pay this time?",
+  "name": "Wer zahlt? - Who Pays",
   "short_name": "WhoPays",
+  "description": "Entscheide spielerisch, wer zahlt",
   "start_url": "/",
+  "scope": "/",
   "display": "standalone",
   "background_color": "#fef3c7",
   "theme_color": "#ec4899",
-  "orientation": "portrait",
+  "orientation": "portrait-primary",
+  "categories": ["utilities", "lifestyle"],
   "icons": [
     {
       "src": "/img/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
       "src": "/img/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
-  ]
+  ],
+  "screenshots": [],
+  "prefer_related_applications": false
 }

public/serviceworker.js

@@ -1,76 +1,114 @@
-const CACHE_NAME = "whopays-v1";
+const CACHE_NAME = "whopays-v2";
 const urlsToCache = [
   "/",
   "/index.html",
   "/style.css",
   "/script.js",
-  "/img/a.png",
-  "/img/b.png",
-  "/img/bgA.jpg",
-  "/img/bgB.jpg",
   "/manifest.json"
 ];
 
-// Install event - cache assets
+console.log("🔧 Service Worker: Loading...");
+
+// Install event
 self.addEventListener("install", (event) => {
+  console.log("⚙️ Service Worker: Installing...");
   event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => {
-      console.log("Cache geöffnet");
-      return cache.addAll(urlsToCache).catch(err => {
-        console.error("Cache fehler:", err);
-      });
-    })
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        console.log("✅ Service Worker: Cache opened");
+        // Try to cache files, but don't fail if some are missing
+        return Promise.allSettled(
+          urlsToCache.map(url => 
+            cache.add(url).catch(err => {
+              console.warn(`⚠️ Failed to cache: ${url}`, err);
+              return null;
+            })
+          )
+        );
+      })
+      .then(() => {
+        console.log("✅ Service Worker: Installed");
+      })
+      .catch(err => {
+        console.error("❌ Service Worker: Install failed", err);
+      })
   );
   self.skipWaiting();
 });
 
-// Activate event - clean old caches
+// Activate event
 self.addEventListener("activate", (event) => {
+  console.log("🔄 Service Worker: Activating...");
   event.waitUntil(
     caches.keys().then((cacheNames) => {
       return Promise.all(
         cacheNames.map((cacheName) => {
           if (cacheName !== CACHE_NAME) {
-            console.log("Alte Cache löschen:", cacheName);
+            console.log(`🗑️ Service Worker: Deleting old cache: ${cacheName}`);
             return caches.delete(cacheName);
           }
         })
       );
+    }).then(() => {
+      console.log("✅ Service Worker: Activated");
     })
   );
   self.clients.claim();
 });
 
-// Fetch event - serve from cache, fallback to network
+// Fetch event
 self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  
   // Network first for API calls
-  if (event.request.url.includes("/status") || 
-      event.request.url.includes("/toggle")) {
+  if (url.pathname.startsWith("/status") || url.pathname.startsWith("/toggle")) {
     event.respondWith(
-      fetch(event.request).catch(() => {
-        return new Response(
-          JSON.stringify({ error: "Offline" }),
-          { headers: { "Content-Type": "application/json" } }
-        );
-      })
+      fetch(event.request)
+        .catch(() => {
+          console.warn("⚠️ API offline, returning error");
+          return new Response(
+            JSON.stringify({ error: "Offline" }),
+            { 
+              headers: { "Content-Type": "application/json" },
+              status: 503
+            }
+          );
+        })
     );
     return;
   }
 
   // Cache first for static assets
   event.respondWith(
-    caches.match(event.request).then((response) => {
-      return response || fetch(event.request).then((fetchResponse) => {
-        return caches.open(CACHE_NAME).then((cache) => {
-          cache.put(event.request, fetchResponse.clone());
+    caches.match(event.request)
+      .then((response) => {
+        if (response) {
+          return response;
+        }
+        
+        return fetch(event.request).then((fetchResponse) => {
+          // Only cache successful responses
+          if (!fetchResponse || fetchResponse.status !== 200 || fetchResponse.type !== 'basic') {
+            return fetchResponse;
+          }
+
+          const responseToCache = fetchResponse.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+
           return fetchResponse;
         });
-      });
-    }).catch(() => {
-      // Fallback for navigation requests
-      if (event.request.mode === 'navigate') {
-        return caches.match('/index.html');
-      }
-    })
+      })
+      .catch((err) => {
+        console.warn("⚠️ Fetch failed:", err);
+        // Fallback for navigation requests
+        if (event.request.mode === 'navigate') {
+          return caches.match('/index.html');
+        }
+        return new Response('Offline', { status: 503 });
+      })
   );
-});
+});
+
+console.log("✅ Service Worker: Script loaded");