fix offline mode

Author: FedoseevSM

public/sw.js

@@ -15,11 +15,7 @@ self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open(STATIC_CACHE).then(cache => {
       console.log('Caching static assets');
-      const assets = [
-        '/',
-        '/index.html'
-      ];
-      return cache.addAll(assets).catch(err => {
+      return cache.addAll(STATIC_ASSETS).catch(err => {
         console.warn('Some static assets failed to cache:', err);
       });
     })
@@ -49,52 +45,39 @@ self.addEventListener('activate', (event) => {
 self.addEventListener('fetch', (event) => {
   const url = new URL(event.request.url);
 
-  // Don't intercept non-GET requests to our own origin (they should go directly)
-  if (url.origin === location.origin && event.request.method !== 'GET') {
+  // Handle all GitHub API requests for any method
+  if (url.origin === GITHUB_API_BASE) {
+    event.respondWith(handleGitHubRequest(event.request));
     return;
   }
 
-  // Handle all GitHub API requests
-  if (url.origin === GITHUB_API_BASE) {
-    event.respondWith(handleGitHubRequest(event.request));
+  if (event.request.method !== 'GET') {
     return;
   }
 
-  // Allow external resources to pass through without caching scripts
-  // Only handle if method is GET
-  if (event.request.method === 'GET') {
-    // For gravatar images - cache them, but let umnico and other scripts pass through
-    if ((url.hostname.includes('gravatar.com') || url.hostname.includes('www.gravatar.com')) && 
-        event.request.destination === 'image') {
-      event.respondWith(
-        caches.open(EXTERNAL_CACHE).then(cache => {
-          return cache.match(event.request).then(cached => {
-            return fetch(event.request)
-              .then(response => {
-                if (response && response.status === 200) {
-                  cache.put(event.request, response.clone());
-                }
-                return response;
-              })
-              .catch(() => cached || new Response('', { status: 204 }));
-          });
-        })
-      );
-      return;
-    }
+  // Handle external gravatar images separately to support offline avatar caching
+  if ((url.hostname === 'gravatar.com' || url.hostname === 'www.gravatar.com') &&
+      event.request.destination === 'image') {
+    event.respondWith(handleGravatarRequest(event.request));
+    return;
+  }
 
-    // For umnico and other external resources - network only, don't cache scripts
-    if (url.hostname.includes('umnico.com') || url.hostname.includes('www.umnico.com')) {
-      event.respondWith(
-        fetch(event.request)
-          .catch(() => new Response('', { status: 204 }))
-      );
-      return;
-    }
+  // Allow umnico scripts to load from network, but don't block the app
+  if (url.hostname === 'umnico.com' || url.hostname === 'www.umnico.com') {
+    event.respondWith(
+      fetch(event.request).catch(() => new Response('', { status: 204 }))
+    );
+    return;
+  }
 
-    // Handle static assets with network-first strategy
-    event.respondWith(handleStaticRequest(event.request));
+  // Handle page navigation and app shell requests
+  if (event.request.mode === 'navigate' || event.request.headers.get('accept')?.includes('text/html')) {
+    event.respondWith(handleNavigationRequest(event.request));
+    return;
   }
+
+  // Handle same-origin or other static GET requests
+  event.respondWith(handleStaticRequest(event.request));
 });
 
 // Handle GitHub API requests - cache-first for offline support
@@ -105,12 +88,7 @@ async function handleGitHubRequest(request) {
     // For GET requests, check cache first
     if (request.method === 'GET') {
       const cache = await caches.open(GITHUB_API_CACHE);
-      const cacheKey = new Request(request.url, {
-        method: 'GET',
-        headers: new Headers({ Accept: 'application/vnd.github+json' })
-      });
-
-      const cachedResponse = await cache.match(cacheKey);
+      const cachedResponse = await cache.match(request.url);
       if (cachedResponse) {
         return cachedResponse.clone();
       }
@@ -157,29 +135,28 @@ async function handleGitHubRequest(request) {
   }
 }
 
-// Handle static requests - network-first, fallback to cache
+// Handle static requests - cache-first, fallback to network
 async function handleStaticRequest(request) {
+  const cache = await caches.open(STATIC_CACHE);
+  const cachedResponse = await cache.match(request);
+  if (cachedResponse) {
+    return cachedResponse.clone();
+  }
+
   try {
     const response = await fetch(request);
     if (response.ok) {
-      const cache = await caches.open(STATIC_CACHE);
       cache.put(request, response.clone()).catch(err => {
         console.warn('Failed to cache response:', err);
       });
       return response;
     }
     throw new Error('Network response not ok');
   } catch (error) {
-    const cached = await caches.match(request);
-    if (cached) {
-      return cached;
-    }
-
-    const navigationFallback = request.mode === 'navigate' || (request.headers.get('accept')?.includes('text/html'));
-    if (navigationFallback) {
-      const shell = await caches.match('/index.html');
+    if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) {
+      const shell = await cache.match('/index.html');
       if (shell) {
-        return shell;
+        return shell.clone();
       }
     }
 
@@ -190,10 +167,61 @@ async function handleStaticRequest(request) {
   }
 }
 
+// Handle navigation requests with app shell fallback
+async function handleNavigationRequest(request) {
+  const cache = await caches.open(STATIC_CACHE);
+  const shell = await cache.match('/index.html');
+  if (shell) {
+    return shell.clone();
+  }
+
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      cache.put(request, response.clone()).catch(err => {
+        console.warn('Failed to cache navigation response:', err);
+      });
+      return response;
+    }
+  } catch (error) {
+    console.warn('Navigation fetch failed:', error);
+  }
+
+  return new Response('Offline - App shell unavailable', {
+    status: 503,
+    statusText: 'Service Unavailable'
+  });
+}
+
+// Handle Gravatar image requests with cache-first strategy
+async function handleGravatarRequest(request) {
+  const cache = await caches.open(EXTERNAL_CACHE);
+  const cachedResponse = await cache.match(request);
+  if (cachedResponse) {
+    return cachedResponse.clone();
+  }
+
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      cache.put(request, response.clone()).catch(err => {
+        console.warn('Failed to cache gravatar image:', err);
+      });
+      return response;
+    }
+    throw new Error('Network response not ok');
+  } catch (error) {
+    if (cachedResponse) {
+      return cachedResponse.clone();
+    }
+    return new Response('', { status: 204 });
+  }
+}
+
 // Try to return cached version when offline
 async function tryOfflineFallback(request) {
   const cache = await caches.open(GITHUB_API_CACHE);
-  const cached = await cache.match(request);
+  const cached = await cache.match(request.url);
   if (cached) {
     console.log('Returning cached GitHub API response (offline)');
     return cached.clone();