feat: update fetch to fire an asynchronous update cache job

ubiquity · Oct 31, 2024 · 363dcd7 · 363dcd7
1 parent c459465
commit 363dcd7
Show file tree

Hide file tree

Showing 2 changed files with 8,349 additions and 5,862 deletions.
diff --git a/static/progressive-web-app.js b/static/progressive-web-app.js
@@ -64,36 +64,43 @@ self.addEventListener("fetch", (event) => {
 
   event.respondWith(
     (async () => {
-      try {
-        const cachedResponse = await caches.match(event.request);
+      const cachedResponse = await caches.match(event.request);
 
-        const fetchPromise = fetch(event.request)
-          .then(async (networkResponse) => {
-            if (networkResponse.ok) {
-              const responseClone = networkResponse.clone();
-              const cache = await caches.open(cacheName);
-              await cache.put(event.request, responseClone);
+      if (cachedResponse) {
+        // Start a network fetch in the background to update the cache, this will return early from cache
+        // but the fetch will still happen in the background
+        event.waitUntil(
+          (async () => {
+            try {
+              const networkResponse = await fetch(event.request);
+              if (networkResponse.ok) {
+                const responseClone = networkResponse.clone();
+                const cache = await caches.open(cacheName);
+                await cache.put(event.request, responseClone);
+              }
+            } catch (error) {
+              console.error("[Service Worker] Background cache update failed:", error);
             }
-            return networkResponse;
-          })
-          .catch((error) => {
-            console.error("[Service Worker] Network request failed:", error);
-            return (
-              cachedResponse ||
-              new Response("Offline content unavailable", {
-                status: 503,
-                statusText: "Service Unavailable",
-              })
-            );
+          })()
+        );
+        return cachedResponse;
+      } else {
+        // Attempt to fetch from the network if no cache is available
+        try {
+          const networkResponse = await fetch(event.request);
+          if (networkResponse.ok) {
+            const responseClone = networkResponse.clone();
+            const cache = await caches.open(cacheName);
+            await cache.put(event.request, responseClone);
+          }
+          return networkResponse;
+        } catch (error) {
+          console.error("[Service Worker] Fetch failed, and no cache is available:", error);
+          return new Response("An error occurred", {
+            status: 500,
+            statusText: "Internal Server Error",
           });
-
-        return cachedResponse || (await fetchPromise);
-      } catch (error) {
-        console.error("[Service Worker] Error handling fetch:", error);
-        return new Response("An error occurred", {
-          status: 500,
-          statusText: "Internal Server Error",
-        });
+        }
       }
     })()
   );