@rmdes/indiekit-frontend 1.0.0-beta.34 → 1.0.0-beta.36

package/lib/serviceworker.js

@@ -76,24 +76,14 @@ async function clearOldCaches() {
   }
 }
 
-/**
- * Clear the pages cache so stale HTML (with old asset references) is not served
- */
-async function clearPagesCache() {
-  try {
-    await caches.delete(pagesCacheName);
-  } catch (error) {
-    console.error("Error clearing pages cache", error);
-  }
-}
-
 /**
  * Notify all clients that the service worker has been updated
  */
 async function notifyClients() {
+  const version = assetCacheName.replace("assets-", "");
   const allClients = await clients.matchAll({ includeUncontrolled: true });
   for (const client of allClients) {
-    client.postMessage({ command: "SW_UPDATED", version: "APP_VERSION" });
+    client.postMessage({ command: "SW_UPDATED", version });
   }
 }
 
@@ -130,7 +120,10 @@ self.addEventListener("activate", async (event) => {
   event.waitUntil(
     (async () => {
       await clearOldCaches();
-      await clearPagesCache();
+      // Don't clear pages cache on activate — stale cached pages provide a
+      // valuable fallback when the network is slow (e.g. right after a deploy).
+      // The network-first fetch strategy naturally updates cached pages on
+      // every successful navigation, so stale entries are short-lived.
       await clients.claim();
       await notifyClients();
     })(),
@@ -158,44 +151,53 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
-  // For HTML requests, try network with timeout, fall back to cache
+  // For HTML requests: network-first with conditional timeout
+  // - If a cached version exists: race network against timeout, serve cache on timeout
+  // - If no cached version: wait for network without timeout (avoid premature "Offline")
   if (
     request.mode === "navigate" ||
-    request.headers.get("Accept").includes("text/html")
+    (request.headers.get("Accept") || "").includes("text/html")
   ) {
     event.respondWith(
       (async () => {
+        // Check cache and start network fetch in parallel
+        const cachedResponse = await caches.match(request);
+        const networkFetch = (async () => {
+          const preloadResponse = await Promise.resolve(event.preloadResponse);
+          return preloadResponse || (await fetch(request));
+        })();
+
         try {
-          // Race network against a timeout for faster fallback on slow connections
-          const responseFromPreloadOrFetch = await Promise.race([
-            (async () => {
-              const preloadResponse = await Promise.resolve(
-                event.preloadResponse,
-              );
-              return preloadResponse || (await fetch(request));
-            })(),
-            new Promise((_, reject) =>
-              setTimeout(() => reject(new Error("Network timeout")), timeout),
-            ),
-          ]);
+          // Only apply timeout when we have a cached fallback.
+          // Without a cache, it's better to wait for the network (loading spinner)
+          // than to show "Offline" after 5 seconds on a slow backend.
+          const responseFromNetwork = cachedResponse
+            ? await Promise.race([
+                networkFetch,
+                new Promise((_, reject) =>
+                  setTimeout(
+                    () => reject(new Error("Network timeout")),
+                    timeout,
+                  ),
+                ),
+              ])
+            : await networkFetch;
 
           // NETWORK succeeded — cache and serve
           try {
-            const copy = responseFromPreloadOrFetch.clone();
+            const copy = responseFromNetwork.clone();
             const pagesCache = await caches.open(pagesCacheName);
             await pagesCache.put(request, copy);
           } catch (cacheError) {
             console.error("Failed to cache page:", cacheError);
           }
 
-          return responseFromPreloadOrFetch;
+          return responseFromNetwork;
         } catch {
-          // NETWORK failed or timed out — fall back to cache
-          const responseFromCache = await caches.match(request);
-          const offlineResponse = await caches.match("/offline");
+          // NETWORK failed or timed out — fall back to cache or offline
           return (
-            responseFromCache ||
-            offlineResponse ||
+            cachedResponse ||
+            (await caches.match("/offline")) ||
             new Response("Offline", {
               status: 503,
               statusText: "Service Unavailable",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-frontend",
-  "version": "1.0.0-beta.34",
+  "version": "1.0.0-beta.36",
   "description": "Frontend components for Indiekit (fork with floating toolbar)",
   "keywords": [
     "express",