@rmdes/indiekit-frontend 1.0.0-beta.32 → 1.0.0-beta.33

package/layouts/default.njk

@@ -122,6 +122,12 @@
 {% endblock %}
 <script type="module">
   if (navigator.serviceWorker) {
+    // Reload page when a new service worker activates (new deploy)
+    navigator.serviceWorker.addEventListener("message", (event) => {
+      if (event.data && event.data.command === "SW_UPDATED") {
+        window.location.reload();
+      }
+    });
     window.addEventListener("load", () => {
       navigator.serviceWorker.register("/serviceworker.js", {
         scope: '/'

package/lib/serviceworker.js

@@ -8,6 +8,15 @@ const cacheList = new Set([assetCacheName, pagesCacheName, imageCacheName]);
 const placeholderImage = `<svg xmlns="http://www.w3.org/2000/svg"><defs><path id="icon" fill="#AAA" d="M24 32a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-6.9-11.9 4.1 4.1a17 17 0 0 0-9.7 5.3L8 26a22 22 0 0 1 9-6Zm22.5 5.4L36 29l-.8-.8L26 19a22 22 0 0 1 13.5 6.4ZM8.2 11.2l3.7 3.7a24.7 24.7 0 0 0-8.4 6.6l-3.6-3.6c2.4-2.7 5.2-5 8.3-6.7ZM24 7a32 32 0 0 1 23.4 10.2l-3.5 3.6a27 27 0 0 0-24.5-8.4l-4.2-4.2A32 32 0 0 1 24 7ZM2 5l3-3 41 41-3 3L2 5Z" opacity=".7"/>
 </defs><rect fill="#000" width="100%" height="100%" opacity="0.075"/><use href="#icon" x="50%" y="50%" transform="translate(-24 -24)"/></svg>`;
 
+/**
+ * Check if a URL is a hashed asset (content-addressable, immutable)
+ * @param {string} url - Request URL
+ * @returns {boolean}
+ */
+function isHashedAsset(url) {
+  return /\/assets\/app-[a-f0-9]+\.(js|css)$/.test(url);
+}
+
 /**
  * Update asset cache
  * @returns {Promise<Cache>} - Updated asset cache
@@ -16,7 +25,7 @@ async function updateAssetCache() {
   try {
     const assetCache = await caches.open(assetCacheName);
 
-    // These items won’t block the installation of the service worker
+    // These items won't block the installation of the service worker
     assetCache.addAll(["/app.webmanifest"]);
 
     // These items must be cached for service worker to complete installation
@@ -67,6 +76,27 @@ 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 allClients = await clients.matchAll({ includeUncontrolled: true });
+  for (const client of allClients) {
+    client.postMessage({ command: "SW_UPDATED", version: "APP_VERSION" });
+  }
+}
+
 /**
  * Trim cache
  * @param {string} cacheName - Name of cache
@@ -100,7 +130,9 @@ self.addEventListener("activate", async (event) => {
   event.waitUntil(
     (async () => {
       await clearOldCaches();
+      await clearPagesCache();
       await clients.claim();
+      await notifyClients();
     })(),
   );
 });
@@ -126,47 +158,40 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
-  const retrieveFromCache = caches.match(request);
-
-  // For HTML requests, try network, fall back to cache, else show offline page
+  // For HTML requests, try network with timeout, fall back to cache
   if (
     request.mode === "navigate" ||
     request.headers.get("Accept").includes("text/html")
   ) {
     event.respondWith(
       (async () => {
-        // CHECK CACHE
-        const timer = setTimeout(async () => {
-          const responseFromCache = await retrieveFromCache;
-          if (responseFromCache) {
-            return responseFromCache;
-          }
-        }, timeout);
-
         try {
-          const preloadResponse = await Promise.resolve(event.preloadResponse);
-          const responseFromPreloadOrFetch =
-            preloadResponse || (await fetch(request));
+          // 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),
+            ),
+          ]);
 
-          // NETWORK
-          // Save a copy of page to pages cache
-          clearTimeout(timer);
+          // NETWORK succeeded — cache and serve
           try {
             const copy = responseFromPreloadOrFetch.clone();
             const pagesCache = await caches.open(pagesCacheName);
             await pagesCache.put(request, copy);
           } catch (cacheError) {
-            // Cache put failed (e.g., network error response), but continue serving the response
             console.error("Failed to cache page:", cacheError);
           }
 
           return responseFromPreloadOrFetch;
-        } catch (error) {
-          console.error("Network fetch failed:", error, request.url);
-
-          // CACHE or OFFLINE PAGE
-          clearTimeout(timer);
-          const responseFromCache = await retrieveFromCache;
+        } catch {
+          // NETWORK failed or timed out — fall back to cache
+          const responseFromCache = await caches.match(request);
           const offlineResponse = await caches.match("/offline");
           return (
             responseFromCache ||
@@ -184,33 +209,93 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
-  // For non-HTML requests, look in cache first, fall back to network
+  // For hashed assets (e.g. /assets/app-abc123.js): cache-first
+  // These URLs are content-addressable — the content never changes for a given hash
+  if (isHashedAsset(request.url)) {
+    event.respondWith(
+      (async () => {
+        const responseFromCache = await caches.match(request);
+        if (responseFromCache) {
+          return responseFromCache;
+        }
+
+        try {
+          const responseFromFetch = await fetch(request);
+          const copy = responseFromFetch.clone();
+          const assetCache = await caches.open(assetCacheName);
+          await assetCache.put(request, copy);
+          return responseFromFetch;
+        } catch (error) {
+          console.error("Fetch failed for hashed asset:", error, request.url);
+          return new Response("Network error", {
+            status: 503,
+            statusText: "Service Unavailable",
+            headers: { "Content-Type": "text/plain" },
+          });
+        }
+      })(),
+    );
+
+    return;
+  }
+
+  // For other non-HTML requests: stale-while-revalidate
+  // Serve from cache immediately, update cache in background
   event.respondWith(
     (async () => {
       try {
-        const responseFromCache = await retrieveFromCache;
+        const responseFromCache = await caches.match(request);
+
+        // Start network fetch regardless (to update cache)
+        const fetchPromise = fetch(request)
+          .then(async (responseFromFetch) => {
+            // Update cache with fresh response
+            if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
+              try {
+                const copy = responseFromFetch.clone();
+                const imagesCache = await caches.open(imageCacheName);
+                await imagesCache.put(request, copy);
+              } catch (cacheError) {
+                console.error("Failed to cache image:", cacheError);
+              }
+            }
+            return responseFromFetch;
+          })
+          .catch((error) => {
+            console.error(
+              "Background fetch failed:",
+              error,
+              request.url,
+            );
+            return null;
+          });
 
         if (responseFromCache) {
-          // CACHE
+          // CACHE HIT — serve cached, update in background
           return responseFromCache;
-        } else {
-          const responseFromFetch = await fetch(request);
-
-          // NETWORK
-          // If request is for an image, save a copy to images cache
-          if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
-            try {
-              const copy = responseFromFetch.clone();
-              const imagesCache = await caches.open(imageCacheName);
-              await imagesCache.put(request, copy);
-            } catch (cacheError) {
-              // Cache put failed (e.g., network error response), but continue serving the response
-              console.error("Failed to cache image:", cacheError);
-            }
-          }
+        }
 
+        // CACHE MISS — wait for network
+        const responseFromFetch = await fetchPromise;
+        if (responseFromFetch) {
           return responseFromFetch;
         }
+
+        // OFFLINE IMAGE
+        if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
+          return new Response(placeholderImage, {
+            headers: {
+              "Content-Type": "image/svg+xml",
+              "Cache-Control": "no-store",
+            },
+          });
+        }
+
+        return new Response("Network error", {
+          status: 503,
+          statusText: "Service Unavailable",
+          headers: { "Content-Type": "text/plain" },
+        });
       } catch (error) {
         console.error(
           "Fetch failed for non-HTML resource:",
@@ -218,7 +303,6 @@ self.addEventListener("fetch", (event) => {
           request.url,
         );
 
-        // OFFLINE IMAGE
         if (/\.(jpe?g|png|gif|svg|webp)/.test(request.url)) {
           return new Response(placeholderImage, {
             headers: {
@@ -228,7 +312,6 @@ self.addEventListener("fetch", (event) => {
           });
         }
 
-        // For other resources, return a network error response
         return new Response("Network error", {
           status: 503,
           statusText: "Service Unavailable",

package/package.json

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