Fix PWA cache updating so updates will automatically be used

Author: kevindigo

.github/workflows/deploy.yml

@@ -0,0 +1,20 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Update Service Worker Cache Version
+        run: |
+          sed -i "s/const CACHE_VERSION = '[^']*'/const CACHE_VERSION = 'v$(date +%s)'/" sw.js
+          
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./

index.html

@@ -644,6 +644,11 @@ <h3>Random Event</h3>
                 navigator.serviceWorker.register('sw.js')
                     .then(function(registration) {
                         console.log('Service Worker registered with scope:', registration.scope);
+                        
+                        // Auto-reload when new service worker activates
+                        navigator.serviceWorker.addEventListener('controllerchange', () => {
+                            window.location.reload();
+                        });
                     })
                     .catch(function(error) {
                         console.log('Service Worker registration failed:', error);

sw.js

@@ -1,9 +1,13 @@
-const CACHE_NAME = 'kevins-oracle-v1.0.0';
+// Service Worker with proper update handling
+const CACHE_VERSION = 'v1.0.1'; // This will be auto-updated by GitHub Actions
+const CACHE_NAME = `kevins-oracle-${CACHE_VERSION}`;
+
 const urlsToCache = [
   './',
   './index.html',
   './manifest.json',
   './sw.js',
+  './generators.js',
   './icons/icon-72x72.svg',
   './icons/icon-96x96.svg',
   './icons/icon-128x128.svg',
@@ -14,43 +18,84 @@ const urlsToCache = [
   './icons/icon-512x512.svg'
 ];
 
-// Install event - cache essential files
+// Install event - cache essential files and skip waiting
 self.addEventListener('install', event => {
   console.log('Service Worker installing...');
+  
+  // Skip waiting to activate immediately
+  self.skipWaiting();
+  
   event.waitUntil(
     caches.open(CACHE_NAME)
       .then(cache => {
-        console.log('Opened cache');
+        console.log('Opened cache:', CACHE_NAME);
         return cache.addAll(urlsToCache);
       })
-      .then(() => self.skipWaiting())
   );
 });
 
-// Activate event - clean up old caches
+// Activate event - clean up old caches and claim clients
 self.addEventListener('activate', event => {
   console.log('Service Worker activating...');
+  
   event.waitUntil(
     caches.keys().then(cacheNames => {
       return Promise.all(
         cacheNames.map(cacheName => {
+          // Delete all caches that don't match current version
           if (cacheName !== CACHE_NAME) {
             console.log('Deleting old cache:', cacheName);
             return caches.delete(cacheName);
           }
         })
       );
-    }).then(() => self.clients.claim())
+    }).then(() => {
+      // Claim all clients to ensure they use the updated service worker
+      return self.clients.claim();
+    })
   );
 });
 
 // Fetch event - serve from cache, fall back to network
 self.addEventListener('fetch', event => {
+  // Skip non-GET requests and browser extensions
+  if (event.request.method !== 'GET') return;
+  
   event.respondWith(
     caches.match(event.request)
       .then(response => {
         // Return cached version or fetch from network
-        return response || fetch(event.request);
+        if (response) {
+          return response;
+        }
+        
+        // Clone the request because it can only be used once
+        const fetchRequest = event.request.clone();
+        
+        return fetch(fetchRequest).then(response => {
+          // Check if we received a valid response
+          if (!response || response.status !== 200 || response.type !== 'basic') {
+            return response;
+          }
+          
+          // Clone the response because it can only be used once
+          const responseToCache = response.clone();
+          
+          // Cache the new response for future requests
+          caches.open(CACHE_NAME)
+            .then(cache => {
+              cache.put(event.request, responseToCache);
+            });
+          
+          return response;
+        });
       })
   );
+});
+
+// Listen for messages from the client
+self.addEventListener('message', event => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
 });