Aufgearbeitet

Dockerfile

@@ -1,7 +1,22 @@
 FROM node:20-alpine
+
 WORKDIR /app
+
+# Copy package files
 COPY package*.json ./
-RUN npm install
+
+# Install dependencies
+RUN npm install --production
+
+# Copy all application files
 COPY . .
+
+# Expose port
 EXPOSE 3000
-CMD ["npm", "start"]
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Start the server
+CMD ["node", "server.js"]

package.json

@@ -1,11 +1,20 @@
 {
   "name": "whopays",
   "version": "1.0.0",
+  "description": "Who pays app with PWA support",
+  "main": "server.js",
   "type": "module",
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "node server.js"
   },
+  "keywords": [
+    "pwa",
+    "whopays"
+  ],
+  "author": "",
+  "license": "ISC",
   "dependencies": {
-    "express": "^4.19.2"
+    "express": "^4.18.2"
   }
 }

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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <link rel="manifest" href="manifest.json" />
+    
+    <!-- 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"))
+      .then(reg => console.log("✅ Service Worker registriert", reg.scope))
-      .catch(err => console.error("SW Fehler:", err));
+      .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) => {
+    caches.open(CACHE_NAME)
-      console.log("Cache geöffnet");
+      .then((cache) => {
-      return cache.addAll(urlsToCache).catch(err => {
+        console.log("✅ Service Worker: Cache opened");
-        console.error("Cache fehler:", err);
+        // 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") || 
+  if (url.pathname.startsWith("/status") || url.pathname.startsWith("/toggle")) {
-      event.request.url.includes("/toggle")) {
     event.respondWith(
-      fetch(event.request).catch(() => {
+      fetch(event.request)
-        return new Response(
+        .catch(() => {
-          JSON.stringify({ error: "Offline" }),
+          console.warn("⚠️ API offline, returning error");
-          { headers: { "Content-Type": "application/json" } }
+          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) => {
+    caches.match(event.request)
-      return response || fetch(event.request).then((fetchResponse) => {
+      .then((response) => {
-        return caches.open(CACHE_NAME).then((cache) => {
+        if (response) {
-          cache.put(event.request, fetchResponse.clone());
+          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(() => {
+      .catch((err) => {
-      // Fallback for navigation requests
+        console.warn("⚠️ Fetch failed:", err);
-      if (event.request.mode === 'navigate') {
+        // Fallback for navigation requests
-        return caches.match('/index.html');
+        if (event.request.mode === 'navigate') {
-      }
+          return caches.match('/index.html');
-    })
+        }
+        return new Response('Offline', { status: 503 });
+      })
   );
-});
+});
+
+console.log("✅ Service Worker: Script loaded");

server.js

@@ -7,8 +7,33 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
+
+// Trust proxy - CRITICAL for reverse proxy setup
+app.set('trust proxy', true);
+
 app.use(express.json());
-app.use(express.static(path.join(__dirname, "public")));
+
+// Logging middleware
+app.use((req, res, next) => {
+  console.log(`${req.method} ${req.url} - ${req.headers['x-forwarded-proto'] || 'http'}`);
+  next();
+});
+
+// CRITICAL: Serve static files with proper headers
+app.use(express.static(path.join(__dirname, "public"), {
+  setHeaders: (res, filepath) => {
+    if (filepath.endsWith('.js')) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+    }
+    if (filepath.endsWith('.json')) {
+      res.setHeader('Content-Type', 'application/json; charset=utf-8');
+    }
+    if (filepath.endsWith('service-worker.js')) {
+      res.setHeader('Service-Worker-Allowed', '/');
+      res.setHeader('Cache-Control', 'no-cache');
+    }
+  }
+}));
 
 const stateFile = path.join(__dirname, "state.json");
 
@@ -18,26 +43,19 @@ const stateFile = path.join(__dirname, "state.json");
 const CONFIG = {
   A: {
     name: "Marc",
-    color: 0x2ecc71, // grün
+    color: 0x2ecc71,
     icon: "a.png"
   },
   B: {
     name: "Laila",
-    color: 0xe74c3c, // rot
+    color: 0xe74c3c,
     icon: "b.png"
   }
 };
 
-// Öffentliche URL zu deinem Server (WICHTIG für Discord Icons!)
+const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL || "http://localhost:3000";
-const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL
+const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL || "https://discord.com/api/webhooks/1450872860607381515/zRbiXOykKPUfLJ_H87wD2OxQJPLdro6yQzU2T48Pg4fxSNaXEqBFgxdHGTiIDmmKGHIF";
-  || "http://localhost:3000";
 
-
-// 🔔 Discord Webhook URL
-const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL
-  || "https://discord.com/api/webhooks/1450872860607381515/zRbiXOykKPUfLJ_H87wD2OxQJPLdro6yQzU2T48Pg4fxSNaXEqBFgxdHGTiIDmmKGHIF";
-
-  
 // --------------------
 // State Handling
 // --------------------
@@ -77,7 +95,6 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
     }
   ];
 
-  // Add reason field if provided
   if (reason) {
     fields.push({
       name: "📝 Grund",
@@ -103,9 +120,7 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
     await fetch(DISCORD_WEBHOOK_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
+      body: JSON.stringify({ embeds: [embed] })
-        embeds: [embed]
-      })
     });
     console.log("✅ Discord Benachrichtigung gesendet");
   } catch (err) {
@@ -113,17 +128,14 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
   }
 }
 
-
 // --------------------
-// Routes
+// API Routes
 // --------------------
 
-// GET: aktueller Zustand
 app.get("/status", (req, res) => {
   res.json(getState());
 });
 
-// POST: wechseln
 app.post("/toggle", async (req, res) => {
   const state = getState();
   const previousKey = state.current;
@@ -148,15 +160,64 @@ app.post("/toggle", async (req, res) => {
   });
 });
 
-// Fallback
+app.get("/health", (req, res) => {
-app.get(/.*/, (req, res) => {
+  res.json({ status: "ok" });
-  res.sendFile(path.join(__dirname, "public/index.html"));
+});
+
+// --------------------
+// SPA Fallback - NO CRASH
+// --------------------
+// Only serve index.html for navigation requests, not for missing static files
+app.use((req, res, next) => {
+  // If request already handled by static middleware, skip
+  if (res.headersSent) return;
+  
+  // If it's an API route that wasn't matched, 404
+  if (req.url.startsWith('/api/')) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+  
+  // If Accept header indicates browser navigation (HTML), serve index.html
+  const acceptsHtml = req.accepts('html');
+  if (acceptsHtml) {
+    return res.sendFile(path.join(__dirname, "public/index.html"));
+  }
+  
+  // Otherwise 404
+  res.status(404).send('Not found');
+});
+
+// Error handler to prevent crashes
+app.use((err, req, res, next) => {
+  console.error('Server error:', err);
+  res.status(500).json({ error: 'Internal server error' });
 });
 
 // --------------------
 // Start
 // --------------------
 const PORT = process.env.PORT || 3000;
-app.listen(PORT, () =>
+app.listen(PORT, "0.0.0.0", () => {
-  console.log(`WhoPays läuft auf http://localhost:${PORT}`)
+  console.log(`\n✅ WhoPays läuft auf http://0.0.0.0:${PORT}\n`);
-);
+  console.log(`📁 Static files directory: ${path.join(__dirname, "public")}`);
+  console.log(`🔒 Trust proxy: enabled (for reverse proxy support)`);
+  
+  // Verify critical files exist
+  const criticalFiles = [
+    'public/index.html',
+    'public/service-worker.js',
+    'public/manifest.json'
+  ];
+  
+  console.log('\n🔍 Checking critical files:');
+  criticalFiles.forEach(file => {
+    const fullPath = path.join(__dirname, file);
+    const exists = fs.existsSync(fullPath);
+    console.log(`   ${exists ? '✅' : '❌'} ${file}`);
+  });
+  
+  console.log('\n📝 Test URLs (adjust domain for your setup):');
+  console.log(`   http://localhost:${PORT}/`);
+  console.log(`   http://localhost:${PORT}/service-worker.js`);
+  console.log(`   http://localhost:${PORT}/manifest.json\n`);
+});