PWA: SW network-first für HTML, sofortiger Reload bei Update; DevTools: JSON Viewer+Builder

frontend/public/sw.js

@@ -1,24 +1,56 @@
-// Service Worker – erkennt neue Builds und lädt automatisch neu
-// BUILD_TIME wird beim Deploy vom Backend via /api/build-time geliefert
+// Service Worker – Network-first für HTML, kein Cache für Assets
+// Stellt sicher dass nach einem Deploy immer der neue Stand geladen wird
 
-const CACHE_NAME = 'dickendock-v1';
+const CACHE_NAME = 'dickendock-v2';
 
 self.addEventListener('install', () => {
-  self.skipWaiting(); // sofort aktivieren
+  self.skipWaiting(); // sofort aktivieren, nicht auf Tab-Schließen warten
 });
 
 self.addEventListener('activate', e => {
-  // Alte Caches löschen
+  // Alle alten Caches löschen
   e.waitUntil(
     caches.keys()
       .then(keys => Promise.all(keys.map(k => caches.delete(k))))
-      .then(() => self.clients.claim())
+      .then(() => self.clients.claim()) // alle offenen Tabs übernehmen
   );
 });
 
-// Alle Requests direkt ans Netzwerk – kein Caching
 self.addEventListener('fetch', e => {
-  e.respondWith(fetch(e.request));
+  const url = new URL(e.request.url);
+
+  // API-Requests immer direkt ans Netzwerk, nie cachen
+  if (url.pathname.startsWith('/api/')) {
+    e.respondWith(fetch(e.request));
+    return;
+  }
+
+  // index.html und Navigation: Network-first, kein Cache
+  // Damit nach einem Deploy immer die neue Version geladen wird
+  if (e.request.mode === 'navigate' ||
+      url.pathname === '/' ||
+      url.pathname === '/index.html') {
+    e.respondWith(
+      fetch(e.request, { cache: 'no-store' })
+        .catch(() => caches.match('/index.html')) // Fallback wenn offline
+    );
+    return;
+  }
+
+  // JS/CSS/Assets: Network-first mit Cache-Fallback
+  // Vite baut mit Content-Hash im Dateinamen → neue Version = neue URL
+  e.respondWith(
+    fetch(e.request)
+      .then(response => {
+        // Erfolgreiche Antwort kurz cachen als Offline-Fallback
+        if (response.ok) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then(cache => cache.put(e.request, clone));
+        }
+        return response;
+      })
+      .catch(() => caches.match(e.request))
+  );
 });
 
 // Auf Update-Nachricht vom Frontend reagieren