Update service-worker to use NetworkFirst

src/service-worker.ts

@@ -10,47 +10,64 @@
 
 import { clientsClaim } from "workbox-core";
 import { ExpirationPlugin } from "workbox-expiration";
-import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
+import { precacheAndRoute } from "workbox-precaching";
+// import { createHandlerBoundToURL } from "workbox-precaching";
 import { registerRoute } from "workbox-routing";
 import { StaleWhileRevalidate } from "workbox-strategies";
+import { NetworkFirst } from "workbox-strategies";
 
 declare const self: ServiceWorkerGlobalScope;
 
 clientsClaim();
 
+const toPrecache = self.__WB_MANIFEST.filter((file) => {
+  // Check if file is a string
+  if (typeof file === "string") {
+    return !file.includes("index.html");
+  } else {
+    return !file.url.includes("index.html");
+  }
+});
+
 // Precache all of the assets generated by your build process.
 // Their URLs are injected into the manifest variable below.
 // This variable must be present somewhere in your service worker file,
 // even if you decide not to use precaching. See https://cra.link/PWA
-precacheAndRoute(self.__WB_MANIFEST);
+// precacheAndRoute(self.__WB_MANIFEST);
+precacheAndRoute(toPrecache);
 
 // Set up App Shell-style routing, so that all navigation requests
 // are fulfilled with your index.html shell. Learn more at
 // https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$");
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }: { request: Request; url: URL }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== "navigate") {
-      return false;
-    }
+// const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$");
+// registerRoute(
+//   // Return false to exempt requests from being fulfilled by index.html.
+//   ({ request, url }: { request: Request; url: URL }) => {
+//     // If this isn't a navigation, skip.
+//     if (request.mode !== "navigate") {
+//       return false;
+//     }
 
-    // If this is a URL that starts with /_, skip.
-    if (url.pathname.startsWith("/_")) {
-      return false;
-    }
+//     // If this is a URL that starts with /_, skip.
+//     if (url.pathname.startsWith("/_")) {
+//       return false;
+//     }
 
-    // If this looks like a URL for a resource, because it contains
-    // a file extension, skip.
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false;
-    }
+//     // If this looks like a URL for a resource, because it contains
+//     // a file extension, skip.
+//     if (url.pathname.match(fileExtensionRegexp)) {
+//       return false;
+//     }
 
-    // Return true to signal that we want to use the handler.
-    return true;
-  },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
+//     // Return true to signal that we want to use the handler.
+//     return true;
+//   },
+//   createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
+// );
+
+registerRoute(
+  ({ url }) => url.pathname.includes("index.html"),
+  new NetworkFirst()
 );
 
 // An example runtime caching route for requests that aren't handled by the