refactor: simplify precaching

pwa/src/service-worker/set-up-service-worker.js

@@ -1,7 +1,6 @@
 import {
     precacheAndRoute,
     matchPrecache,
-    precache,
     // PrecacheController,
     // PrecacheRoute,
 } from 'workbox-precaching'
@@ -66,21 +65,6 @@ export function setUpServiceWorker() {
     // In development, static assets are handled by 'network first' strategy
     // and will be kept up-to-date.
     if (PRODUCTION_ENV) {
-        // 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.
-        // Includes all built assets and index.html
-        const precacheManifest = self.__WB_MANIFEST || []
-
-        // todo: also do this routing for plugin.html
-        // Extract index.html from the manifest to precache, then route
-        // in a custom way
-        const indexHtmlManifestEntry = precacheManifest.find(({ url }) =>
-            url.endsWith('index.html')
-        )
-        precache([indexHtmlManifestEntry])
-
         // Custom strategy for handling app navigation, specifically to allow
         // navigations to redirect to the login page while online if the
         // user is unauthenticated. Fixes showing the app shell login dialog
@@ -131,13 +115,17 @@ export function setUpServiceWorker() {
         // NOTE: This route must come before any precacheAndRoute calls
         registerRoute(navigationRouteMatcher, navigationRouteHandler)
 
-        // Handle the rest of files in the manifest - filter out index.html,
-        // and all moment-locales, which bulk up the precache and slow down
-        // installation significantly. Handle them network-first in app shell
-        const restOfManifest = precacheManifest.filter((e) => {
-            if (e === indexHtmlManifestEntry) {
-                return false
-            }
+        // 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.
+        // Includes all built assets and index.html
+        const precacheManifest = self.__WB_MANIFEST || []
+
+        // This precache manifest needs to be filtered here instead of at build
+        // time because CRA manages the build process. The manifests below
+        // are managed by our own build tools, so we can filter at build time
+        const filteredPrecacheManifest = precacheManifest.filter((e) => {
             // Files from the precache manifest generated by CRA need to be
             // managed here, because we don't have access to their webpack
             // config
@@ -146,11 +134,9 @@ export function setUpServiceWorker() {
             )
             return !entryShouldBeExcluded
         })
-        precacheAndRoute(restOfManifest)
 
         // Same thing for built plugin assets
         const pluginPrecacheManifest = self.__WB_PLUGIN_MANIFEST || []
-        precacheAndRoute(pluginPrecacheManifest)
 
         // Similar to above; manifest injection from `workbox-build`
         // Precaches all assets in the shell's build folder except in `static`
@@ -160,9 +146,19 @@ export function setUpServiceWorker() {
         // 'injectPrecacheManifest.js' in the CLI package.
         // '[]' fallback prevents an error when switching pwa enabled to disabled
         const sharedBuildManifest = self.__WB_BUILD_MANIFEST || []
-        precacheAndRoute(sharedBuildManifest)
+
+        // Add all these URLs to the precache list and instruct workbox to make
+        // a route for them
+        // NOTE: this includes index.html since it's on the precache list; it's
+        // important that the navigation route above gets registered first
+        precacheAndRoute([
+            ...filteredPrecacheManifest,
+            ...pluginPrecacheManifest,
+            ...sharedBuildManifest,
+        ])
     } else {
-        // This will execute in dev environments
+        // This will execute in dev environments; just included for testing purposes.
+        // Remove before merging
         precacheAndRoute([
             // Let this one work
             { url: './index.html', revision: '1' },