Strategy: cache with network fallback

public/sw.js

@@ -7,7 +7,13 @@ self.addEventListener("install", function (event) {
   event.waitUntil(
     caches.open(CACHE_STATIC_NAME).then((cache) => {
       console.log("[SW precache]");
-      return cache.addAll(["/", "/index.html", "/offline.html", "/help/index.html", "/js/app.js"]);
+      return cache.addAll([
+        "/",
+        "/index.html",
+        "/offline.html",
+        "/help/index.html",
+        "/js/app.js",
+      ]);
     }),
   );
 });
@@ -29,26 +35,38 @@ self.addEventListener("activate", function (event) {
   return self.clients.claim();
 });
 
-self.addEventListener("fetch", function (event) {
+// self.addEventListener("fetch", function (event) {
+//   event.respondWith(
+//     caches.match(event.request).then((res) => {
+//       console.log("res", res);
+//       if (res) {
+//         return res;
+//       } else {
+//         return fetch(event.request.url)
+//           .then((res) => {
+//             return caches.open(CACHE_DYNAMIC_NAME).then((cache) => {
+//               cache.put(event.request.url, res.clone());
+//               return res;
+//             });
+//           })
+//           .catch(() => {
+//             return caches.open(CACHE_STATIC_NAME).then((cache) => {
+//               return cache.match("/offline.html");
+//             });
+//           });
+//       }
+//     }),
+//   );
+// });
+
+// Strategy: cache with network fallback
+
+self.addEventListener("fetch", (event) => {
   event.respondWith(
-    caches.match(event.request).then((res) => {
+    caches.open(CACHE_STATIC_NAME).then((cache) => {
-      console.log("res", res);
+      return cache.match(event.request).then((res) => {
-      if (res) {
+        return res || fetch(event.request);
-        return res;
-      } else {
-        return fetch(event.request.url)
-          .then((res) => {
-            return caches.open(CACHE_DYNAMIC_NAME).then((cache) => {
-              cache.put(event.request.url, res.clone());
-              return res;
       });
-          })
-          .catch(() => {
-            return caches.open(CACHE_STATIC_NAME).then((cache) => {
-              return cache.match("/offline.html");
-            }); 
-          });
-      }
     }),
   );
 });