Fix PWA auto-update: stale-while-revalidate, update detection, auto-reload

The installed PWA was not auto-updating because:
- Cache-first strategy served old assets forever until manual reinstall
- No update detection or user notification

Fixes:
- Change asset fetch strategy from cache-first to stale-while-revalidate:
  serve cached version immediately, fetch fresh version in background,
  update cache for next load
- Add SW message listener for skipWaiting command
- Add update detection in index.html: checks for updates every 60s,
  auto-reloads when new SW activates (seamless update)
- Move clients.claim() into activate handler's promise chain

Users will now get updates automatically on next app open after a deploy.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lifeart

public/index.html

@@ -50,7 +50,21 @@
   <script src="js/bundle.js"></script>
   <script>
     if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('sw.js').catch(() => {});
+      navigator.serviceWorker.register('sw.js').then(function(reg) {
+        // Check for updates every 60 seconds
+        setInterval(function() { reg.update(); }, 60000);
+        // When a new SW is waiting, auto-activate it and reload
+        reg.addEventListener('updatefound', function() {
+          var newWorker = reg.installing;
+          if (newWorker) {
+            newWorker.addEventListener('statechange', function() {
+              if (newWorker.state === 'activated' && navigator.serviceWorker.controller) {
+                window.location.reload();
+              }
+            });
+          }
+        });
+      }).catch(function() {});
     }
   </script>
 </body>

public/sw.js

@@ -20,47 +20,55 @@ const ASSETS = [
   './manifest.json'
 ];
 
-// Install - cache all assets
+// Install - cache all assets, activate immediately
 self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
   );
   self.skipWaiting();
 });
 
-// Activate - clean old caches
+// Activate - clean old caches, take control immediately
 self.addEventListener('activate', (event) => {
   event.waitUntil(
     caches.keys().then((keys) =>
       Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
-    )
+    ).then(() => self.clients.claim())
   );
-  self.clients.claim();
 });
 
-// Fetch - cache-first for assets, network-first for navigation
+// Fetch strategy
 self.addEventListener('fetch', (event) => {
   const { request } = event;
 
+  // Navigation: network-first (SPA routing)
   if (request.mode === 'navigate') {
-    // Network-first for navigation (SPA)
     event.respondWith(
       fetch(request).catch(() => caches.match('./index.html'))
     );
     return;
   }
 
-  // Cache-first for assets
+  // Assets: stale-while-revalidate
+  // Serve from cache immediately, then update cache in background
   event.respondWith(
     caches.match(request).then((cached) => {
-      if (cached) return cached;
-      return fetch(request).then((response) => {
+      const fetchPromise = fetch(request).then((response) => {
         if (response.ok) {
           const clone = response.clone();
           caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
         }
         return response;
-      });
+      }).catch(() => cached);
+
+      return cached || fetchPromise;
     })
   );
 });
+
+// Listen for skip-waiting message from the app
+self.addEventListener('message', (event) => {
+  if (event.data === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});