Auto-Reload bei neuem Build: no-cache index.html, build-time Check, SW skip-waiting

frontend/public/sw.js

@@ -1,9 +1,27 @@
-// Passiver Service Worker – nur für PWA-Installierbarkeit, kein Caching
-// Verhindert schwarze Seiten nach Rebuilds
+// Service Worker – erkennt neue Builds und lädt automatisch neu
+// BUILD_TIME wird beim Deploy vom Backend via /api/build-time geliefert
 
-self.addEventListener('install', () => self.skipWaiting());
-self.addEventListener('activate', e => e.waitUntil(
-  caches.keys().then(keys => Promise.all(keys.map(k => caches.delete(k))))
-    .then(() => self.clients.claim())
-));
-// Alle Requests direkt ans Netzwerk – kein Intercept
+const CACHE_NAME = 'dickendock-v1';
+
+self.addEventListener('install', () => {
+  self.skipWaiting(); // sofort aktivieren
+});
+
+self.addEventListener('activate', e => {
+  // Alte Caches löschen
+  e.waitUntil(
+    caches.keys()
+      .then(keys => Promise.all(keys.map(k => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+// Alle Requests direkt ans Netzwerk – kein Caching
+self.addEventListener('fetch', e => {
+  e.respondWith(fetch(e.request));
+});
+
+// Auf Update-Nachricht vom Frontend reagieren
+self.addEventListener('message', e => {
+  if (e.data === 'SKIP_WAITING') self.skipWaiting();
+});

frontend/src/main.jsx

@@ -2,6 +2,45 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 
+// ── Service Worker registrieren + Auto-Reload bei neuem Build ─────────────────
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').then(reg => {
+    // Wenn ein neuer SW wartet: sofort übernehmen lassen
+    const takeOver = () => {
+      if (reg.waiting) {
+        reg.waiting.postMessage('SKIP_WAITING');
+      }
+    };
+    reg.addEventListener('updatefound', () => {
+      const newWorker = reg.installing;
+      newWorker?.addEventListener('statechange', () => {
+        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+          takeOver();
+        }
+      });
+    });
+    // Wenn SW übernimmt → Seite neu laden
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      window.location.reload();
+    });
+  });
+
+  // Beim Start: Build-Zeit prüfen und bei neuer Version neu laden
+  const STORED_KEY = 'dd_build_time';
+  fetch('/api/build-time', { cache: 'no-store' })
+    .then(r => r.json())
+    .then(({ buildTime }) => {
+      const stored = localStorage.getItem(STORED_KEY);
+      if (stored && stored !== buildTime) {
+        localStorage.setItem(STORED_KEY, buildTime);
+        window.location.reload();
+      } else {
+        localStorage.setItem(STORED_KEY, buildTime);
+      }
+    })
+    .catch(() => {}); // offline – kein reload
+}
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode><App /></React.StrictMode>
 )