fix(pwa): add config option to omit files from precache [LIBS-482] (#793)

* fix(pwa): add config option to omit files from precache

* chore: add some precache test materials to pwa-app

Author: KaiVandivier

cli/config/d2.pwa.config.js

@@ -38,6 +38,18 @@ module.exports = {
              * https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list
              */
             additionalManifestEntries: [],
+            /**
+             * By default, all the contents of the `build` folder are added to
+             * the precache to give the app the best chances of functioning
+             * completely while offline. Developers may choose to omit some
+             * of these files (for example, thousands of font or image files)
+             * if they cause cache bloat and the app can work fine without
+             * them precached. See LIBS-482
+             *
+             * The globs should be relative to the public dir of the built app.
+             * Used in injectPrecacheManifest.js
+             */
+            globsToOmitFromPrecache: [],
         },
     },
 }

cli/src/lib/pwa/injectPrecacheManifest.js

@@ -42,9 +42,14 @@ module.exports = function injectPrecacheManifest(paths, config) {
         swDest: paths.shellBuildServiceWorker,
         globDirectory: paths.shellBuildOutput,
         globPatterns: ['**/*'],
-        // Skip index.html and `static` directory;
+        // Skip index.html, (plugin.html,) and `static` directory;
         // CRA's workbox-webpack-plugin handles it smartly
-        globIgnores: ['static/**/*', paths.launchPath],
+        globIgnores: [
+            'static/**/*',
+            paths.launchPath,
+            paths.pluginLaunchPath,
+            ...config.pwa.caching.globsToOmitFromPrecache,
+        ],
         additionalManifestEntries: config.pwa.caching.additionalManifestEntries,
         injectionPoint: 'self.__WB_BUILD_MANIFEST',
         // Skip revision hashing for files with hash or semver in name:

docs/pwa/pwa.md

@@ -18,6 +18,7 @@ You can opt in to PWA features using options in `d2.config.js`. Here are the opt
 | `pwa.caching.patternsToOmitFromCacheableSections` | Array of RegExps or Strings                                         | Similar to the above setting, except this is a list of URL patterns to omit from _cacheable (recorded) sections_. Requests with URLs that are filtered out from cacheable sections can still be cached in the app shell cache, unless they are filtered out from the app shell as well using the setting above. When choosing these URL filters, note that it is better to _cache too many things_ than to risk _not caching an important part of the section_ which could break the offline functionality of the section, so choose your filter patterns accordingly.                                             |
 | `pwa.caching.patternsToOmit`                      | Array of RegExps or Strings                                         | Deprecated; superceded by `patternsToOmitFromAppShell`. The new option takes precedence.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `pwa.caching.additionalManifestEntries`           | Array of Objects with signature `{ revision: String, url: String }` | A list of files that can be added to the precache manifest. Note that the service worker uses Workbox to precache all static assets that end up in the ‘build’ folder after the CRA compilation and build step during the d2-app-scripts build process. The format of this list must match the [required format for Workbox precache manifests](https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list), i.e. it must include a revision hash to inform when that file needs to be updated in the precache.                                                   |
+| `pwa.caching.globsToOmitFromPrecache`             | An array of **glob** Strings                                        | A list of globs that will cause matching files to be omitted from precaching. The globs should be **relative to the 'public' directory** of the built app. For example, if you have a folder of fonts in your app in `./public/fonts/` that you want to omit from precaching, you can use the glob `'fonts/**'` in this array. The omitted files can still be cached at runtime later.                                                                                                                                                                                                                             |
 
 ### Offline caching
 

examples/pwa-app/d2.config.js

@@ -6,6 +6,8 @@ const config = {
         caching: {
             // For the purposes of this demo, to simulate dashboard content:
             patternsToOmitFromAppShell: ['visualizations'],
+            // To test precache filtering: (relative to PUBLIC_DIR)
+            globsToOmitFromPrecache: ['exclude-from-precache/**'],
         },
     },