fix: omit moment-locales from precache (#806)

* fix: omit `moment-locales` from precache

* refactor: make extensible cache exclude list

* refactor: return !entryShouldBeExcluded

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],

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)