diff --git a/pwa/src/service-worker/set-up-service-worker.js b/pwa/src/service-worker/set-up-service-worker.js index b2f87225..ac20c713 100644 --- a/pwa/src/service-worker/set-up-service-worker.js +++ b/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' },