Strategy: cache then network

public/sw.js

@@ -93,12 +93,28 @@ self.addEventListener("activate", function (event) {
 
 // Strategy: network with cache fallback
 
+// self.addEventListener("fetch", (event) => {
+//   event.respondWith(
+//     fetch(event.request).catch(() => {
+//       return caches.open(CACHE_STATIC_NAME).then((cache) => {
+//         return cache.match(event.request);
+//       });
+//     }),
+//   );
+// });
+
+// Startegy: cache then network
+
 self.addEventListener("fetch", (event) => {
   event.respondWith(
-    fetch(event.request).catch(() => {
-      return caches.open(CACHE_STATIC_NAME).then((cache) => {
-        return cache.match(event.request);
+    caches.match(event.request).then((cache) => {
+      const fetchPromise = fetch(event.request).then((res) => {
+        return caches.open(CACHE_STATIC_NAME).then((cache) => {
+          cache.put(event.request, res.clone());
+          return res;
+        });
       });
+      return cache || fetchPromise;
     }),
   );
 });