dev day #79

frontend/public/service-worker.js

@@ -1,19 +1,18 @@
 /* eslint-disable no-restricted-globals */
 // Service Worker for PWA support and offline functionality
 
-const CACHE_VERSION = 'v1.0.0';
+const CACHE_VERSION = 'v1.0.1';
 const CACHE_NAME = `fotbal-club-cache-${CACHE_VERSION}`;
 
 // Assets to cache on install
 const STATIC_ASSETS = [
   '/',
   '/index.html',
-  '/static/css/main.css',
-  '/static/js/main.js',
   '/manifest.json',
   '/favicon.ico',
   '/logo192.png',
   '/logo512.png',
+  '/robots.txt',
 ];
 
 // API endpoints to cache
@@ -75,11 +74,22 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
+  // Only handle same-origin requests
+  if (url.origin !== self.location.origin) {
+    return;
+  }
+
   // Skip admin routes
   if (url.pathname.startsWith('/admin')) {
     return;
   }
 
+  // Handle SPA navigations with app shell fallback
+  if (request.mode === 'navigate') {
+    event.respondWith(handleNavigationRequest(request));
+    return;
+  }
+
   // Handle API requests
   if (url.pathname.startsWith('/api/')) {
     event.respondWith(handleAPIRequest(request));
@@ -114,8 +124,8 @@ async function handleStaticRequest(request) {
   } catch (error) {
     console.error('[SW] Fetch failed:', error);
     
-    // Return offline page if available
-    const cachedOffline = await caches.match('/offline.html');
+    // Return app shell (index.html) if available
+    const cachedOffline = await caches.match('/index.html');
     if (cachedOffline) {
       return cachedOffline;
     }
@@ -129,6 +139,28 @@ async function handleStaticRequest(request) {
   }
 }
 
+// Handle SPA navigation requests - Network First with index.html fallback
+async function handleNavigationRequest(request) {
+  try {
+    const networkResponse = await fetch(request);
+    if (networkResponse && networkResponse.ok) {
+      return networkResponse;
+    }
+  } catch (error) {
+    console.error('[SW] Navigation fetch failed:', error);
+  }
+  // Fallback to cached index.html (app shell)
+  const cachedIndex = await caches.match('/index.html');
+  if (cachedIndex) {
+    return cachedIndex;
+  }
+  return new Response('Offline - Please check your connection', {
+    status: 503,
+    statusText: 'Service Unavailable',
+    headers: { 'Content-Type': 'text/plain' },
+  });
+}
+
 // Handle API requests - Network First strategy with cache fallback
 async function handleAPIRequest(request) {
   try {