Strategy: network with cache fallback

public/sw.js

@@ -1,4 +1,4 @@
-let CACHE_STATIC_NAME = "static-v2";
+let CACHE_STATIC_NAME = "static-v3";
 let CACHE_DYNAMIC_NAME = "dynamic-v3";
 
 self.addEventListener("install", function (event) {
@@ -82,11 +82,23 @@ self.addEventListener("activate", function (event) {
 // so there is no need of any request listener
 
 // browser ignores this because we are not intercepting
-self.addEventListener("fetch", (event) => {
-  return fetch(event.request);
-});
+// self.addEventListener("fetch", (event) => {
+//   return fetch(event.request);
+// });
+
+// // same result at end but intercepting with SW
+// self.addEventListener("fetch", (event) => {
+//   event.respondWith(fetch(event.request));
+// });
+
+// Strategy: network with cache fallback
 
-// same result at end but intercepting with SW
 self.addEventListener("fetch", (event) => {
-  event.respondWith(fetch(event.request));
+  event.respondWith(
+    fetch(event.request).catch(() => {
+      return caches.open(CACHE_STATIC_NAME).then((cache) => {
+        return cache.match(event.request);
+      });
+    }),
+  );
 });