fix offline mode bug 2

Author: avidrucker

public/service-worker.js

@@ -1,90 +1,78 @@
 // public/service-worker.js
 
 /* ship-log-map: Service Worker (offline + update + installable)
- * IMPORTANT: Must be served at <BASE_URL>/service-worker.js
- * Example on GitHub Pages: https://<user>.github.io/ship-log-map/service-worker.js
+ * IMPORTANT: Served at <BASE_URL>/service-worker.js (e.g., /ship-log-map/service-worker.js)
  */
 
-const APP_VERSION = '0.0.1'; // optionally replaced by CI
+const APP_VERSION = '0.0.1';
 const CACHE_PREFIX = 'ship-log-map';
 const PRECACHE = `${CACHE_PREFIX}-precache-v${APP_VERSION}`;
 const RUNTIME  = `${CACHE_PREFIX}-runtime-v${APP_VERSION}`;
 
 // Derive BASE_URL from this file's own URL directory, e.g. '/ship-log-map/'
 const BASE_URL = (() => {
   const url = new URL(self.location.href);
-  const path = url.pathname.replace(/[^/]+$/, ''); // drop filename
+  const path = url.pathname.replace(/[^/]+$/, '');
   return path.endsWith('/') ? path : path + '/';
 })();
 
-// Core URLs we always want available offline
+// Core app-shell we always want offline
 const CORE_URLS = [
   `${BASE_URL}`,
   `${BASE_URL}index.html`,
   `${BASE_URL}manifest.webmanifest`,
   `${BASE_URL}offline.html`,
   `${BASE_URL}logo192.png`,
   `${BASE_URL}logo512.png`,
-  // Vite’s default dev asset; harmless if missing in prod:
-  `${BASE_URL}vite.svg`,
+  `${BASE_URL}vite.svg`, // harmless if missing in prod
 ];
 
-// Support “skip waiting” from the app
 self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
+  if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();
 });
 
-// ---- Build asset discovery (read index.html, collect /assets/*.js|.css and linked styles) ----
+// Discover built assets from index.html (Vite emits /assets/*.{js,css})
 async function discoverBuildAssets() {
   try {
     const res = await fetch(`${BASE_URL}index.html`, { cache: 'no-store' });
     if (!res.ok) return [];
     const html = await res.text();
     const urls = new Set();
 
-    // Capture hashed assets emitted by Vite under <base>/assets/
+    // Find /assets/*.{js,css} under our BASE_URL
     const assetRegex = new RegExp(
       `${BASE_URL.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')}assets/[^"']+\\.(?:js|css)`,
       'g'
     );
-    for (const m of html.matchAll(assetRegex)) {
-      urls.add(m[0]);
-    }
+    for (const m of html.matchAll(assetRegex)) urls.add(m[0]);
 
-    // Capture additional linked stylesheets (handle relative + absolute)
+    // Also follow <link rel="stylesheet" href="...">
     const linkHrefRegex = /<link\s+[^>]*rel=["']stylesheet["'][^>]*href=["']([^"']+)["']/gi;
     const baseForHtml = new URL(BASE_URL, self.location.origin);
     let lm;
     while ((lm = linkHrefRegex.exec(html)) !== null) {
-      const hrefAbs = new URL(lm[1], baseForHtml).href;
+      const hrefAbs = new URL(lm[1], baseForHtml).href; // ✅ fix
       const u = new URL(hrefAbs);
-      // Same-origin and within our scope
       if (u.origin === self.location.origin && u.pathname.startsWith(BASE_URL)) {
         urls.add(u.pathname);
       }
     }
 
     return Array.from(urls);
-  } catch (_e) {
-    // Fail-soft: no dynamic assets discovered
+  } catch {
     return [];
   }
 }
 
-// ---- Install: precache core + discovered build assets ----
 self.addEventListener('install', (event) => {
   event.waitUntil((async () => {
     const cache = await caches.open(PRECACHE);
     const dynamicAssets = await discoverBuildAssets();
-    const toCache = [...CORE_URLS, ...dynamicAssets];
-    await cache.addAll(toCache);
+    await cache.addAll([...CORE_URLS, ...dynamicAssets]);
     await self.skipWaiting();
   })());
 });
 
-// ---- Activate: clean old caches & take control ----
 self.addEventListener('activate', (event) => {
   event.waitUntil((async () => {
     const names = await caches.keys();
@@ -97,14 +85,13 @@ self.addEventListener('activate', (event) => {
   })());
 });
 
-// ---- Strategies ----
 async function networkFirst(request) {
   try {
     const fresh = await fetch(request);
     const cache = await caches.open(RUNTIME);
     if (fresh && fresh.ok) cache.put(request, fresh.clone());
     return fresh;
-  } catch (_e) {
+  } catch {
     const cached = await caches.match(request);
     if (cached) return cached;
     if (request.mode === 'navigate') {
@@ -113,7 +100,7 @@ async function networkFirst(request) {
       const offline = await caches.match(`${BASE_URL}offline.html`);
       if (offline) return offline;
     }
-    throw _e;
+    throw new Error('Network and cache both failed');
   }
 }
 
@@ -126,30 +113,24 @@ async function cacheFirst(request) {
   return res;
 }
 
-// ---- Fetch routing ----
 self.addEventListener('fetch', (event) => {
   const { request } = event;
-
-  // Only deal with GETs and requests within our scope
   if (request.method !== 'GET') return;
 
   const url = new URL(request.url);
   if (url.origin !== self.location.origin) return;
   if (!url.pathname.startsWith(BASE_URL)) return;
 
-  // Navigations: network-first with offline fallback
   if (request.mode === 'navigate') {
     event.respondWith(networkFirst(request));
     return;
   }
 
-  // HTML files: network-first (fresh content when online)
   if (url.pathname.endsWith('.html')) {
     event.respondWith(networkFirst(request));
     return;
   }
 
-  // Hashed build assets: cache-first (content-hashed by Vite)
   if (
     url.pathname.startsWith(`${BASE_URL}assets/`) ||
     url.pathname.endsWith('.js') ||
@@ -159,6 +140,5 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // Default: cache-first
   event.respondWith(cacheFirst(request));
 });