diff --git a/pwa/src/service-worker/set-up-service-worker.js b/pwa/src/service-worker/set-up-service-worker.js index 8a053d18f..821df4a09 100644 --- a/pwa/src/service-worker/set-up-service-worker.js +++ b/pwa/src/service-worker/set-up-service-worker.js @@ -26,6 +26,7 @@ import { setUpKillSwitchServiceWorker, getClientsInfo, claimClients, + CRA_MANIFEST_EXCLUDE_PATTERNS, } from './utils.js' export function setUpServiceWorker() { @@ -127,10 +128,21 @@ export function setUpServiceWorker() { } registerRoute(navigationRouteMatcher, navigationRouteHandler) - // Handle the rest of files in the manifest - const restOfManifest = precacheManifest.filter( - (e) => e !== indexHtmlManifestEntry - ) + // 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 + } + // Files from the precache manifest generated by CRA need to be + // managed here, because we don't have access to their webpack + // config + const entryShouldBeExcluded = CRA_MANIFEST_EXCLUDE_PATTERNS.some( + (pattern) => pattern.test(e.url) + ) + return !entryShouldBeExcluded + }) precacheAndRoute(restOfManifest) // Similar to above; manifest injection from `workbox-build` @@ -175,12 +187,9 @@ export function setUpServiceWorker() { ) // Network-first caching by default - // (and for static assets while in development) // * NOTE: there may be lazy-loading errors while offline in dev mode registerRoute( - ({ url }) => - urlMeetsAppShellCachingCriteria(url) || - (!PRODUCTION_ENV && fileExtensionRegexp.test(url.pathname)), + ({ url }) => urlMeetsAppShellCachingCriteria(url), new NetworkFirst({ cacheName: 'app-shell', plugins: [dhis2ConnectionStatusPlugin], diff --git a/pwa/src/service-worker/utils.js b/pwa/src/service-worker/utils.js index 5f6f499ae..4fd83b313 100644 --- a/pwa/src/service-worker/utils.js +++ b/pwa/src/service-worker/utils.js @@ -11,6 +11,11 @@ const APP_ADAPTER_URL_PATTERNS = [ /\/api(\/\d+)?\/userSettings/, // useLocale /\/api(\/\d+)?\/me\?fields=id$/, // useVerifyLatestUser ] +// Note that the CRA precache manifest files start with './' +// TODO: Make this extensible with a d2.config.js option +export const CRA_MANIFEST_EXCLUDE_PATTERNS = [ + /^\.\/static\/js\/moment-locales\//, +] // '[]' Fallback prevents error when switching from pwa enabled to disabled const APP_SHELL_URL_FILTER_PATTERNS = JSON.parse( @@ -52,6 +57,14 @@ export function setUpKillSwitchServiceWorker() { } export function urlMeetsAppShellCachingCriteria(url) { + // If this request is for a file that belongs to this app, cache it + // (in production, many, but not all, app files will be precached - + // e.g. moment-locales is omitted) + const appScope = new URL('./', self.location.href) + if (url.href.startsWith(appScope.href)) { + return true + } + // Cache this request if it is important for the app adapter to load const isAdapterRequest = APP_ADAPTER_URL_PATTERNS.some((pattern) => pattern.test(url.href)