fix: building SW without CRA

cli/src/commands/build.js

@@ -9,7 +9,7 @@ const loadEnvFiles = require('../lib/loadEnvFiles')
 const parseConfig = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makePlugin = require('../lib/plugin')
-// const { injectPrecacheManifest } = require('../lib/pwa')
+const { injectPrecacheManifest, compileServiceWorker } = require('../lib/pwa')
 const makeShell = require('../lib/shell')
 const { validatePackage } = require('../lib/validatePackage')
 const { handler: pack } = require('./pack.js')
@@ -138,11 +138,13 @@ const handler = async ({
                 }
 
                 if (config.pwa.enabled) {
+                    reporter.info('Compiling service worker...')
+                    await compileServiceWorker({ config, paths, mode })
+
                     reporter.info(
                         'Injecting supplementary precache manifest...'
                     )
-                    // todo: update precache manifest
-                    // await injectPrecacheManifest(paths, config)
+                    await injectPrecacheManifest(paths, config)
                 }
             } else {
                 await Promise.all([

cli/src/commands/start.js

@@ -115,11 +115,9 @@ const handler = async ({
 
             if (config.pwa.enabled) {
                 reporter.info('Compiling service worker...')
-                await compileServiceWorker({
-                    config,
-                    paths,
-                    mode: 'development',
-                })
+                await compileServiceWorker({ config, paths, mode })
+                // don't need to inject precache manifest because no precaching
+                // is done in development environments
             }
 
             reporter.print('')

cli/src/lib/pwa/compileServiceWorker.js

@@ -23,22 +23,24 @@ const getPWAEnvVars = require('./getPWAEnvVars')
  */
 function compileServiceWorker({ config, paths, mode }) {
     // Choose appropriate destination for compiled SW based on 'mode'
-    const outputPath =
-        mode === 'production'
-            ? paths.shellBuildServiceWorker
-            : paths.shellPublicServiceWorker
+    const isProduction = mode === 'production'
+    const outputPath = isProduction
+        ? paths.shellBuildServiceWorker
+        : paths.shellPublicServiceWorker
     const { dir: outputDir, base: outputFilename } = path.parse(outputPath)
 
     // This is part of a bit of a hacky way to provide the same env vars to dev
     // SWs as in production by adding them to `process.env` using the plugin
     // below.
     // TODO: This could be cleaner if the production SW is built in the same
+    // TODO: It is now; clean this up
     // way instead of using the CRA webpack config, so both can more easily
     // share environment variables.
     const env = getEnv({ name: config.title, ...getPWAEnvVars(config) })
 
     const webpackConfig = {
         mode, // "production" or "development"
+        devtool: isProduction ? false : 'source-map',
         entry: paths.shellSrcServiceWorker,
         output: {
             path: outputDir,

cli/src/lib/pwa/injectPrecacheManifest.js

@@ -42,19 +42,16 @@ module.exports = function injectPrecacheManifest(paths, config) {
         swDest: paths.shellBuildServiceWorker,
         globDirectory: paths.shellBuildOutput,
         globPatterns: ['**/*'],
-        // Skip index.html, (plugin.html,) and `static` directory;
-        // CRA's workbox-webpack-plugin handles it smartly
         globIgnores: [
-            'static/**/*',
-            paths.launchPath,
-            paths.pluginLaunchPath,
+            // todo: skip moment locales (requires putting them in their own dir)
+            '**/*.map',
             ...config.pwa.caching.globsToOmitFromPrecache,
         ],
         additionalManifestEntries: config.pwa.caching.additionalManifestEntries,
-        injectionPoint: 'self.__WB_BUILD_MANIFEST',
+        injectionPoint: 'self.__WB_MANIFEST',
         // Skip revision hashing for files with hash or semver in name:
-        // (see https://regex101.com/r/z4Hy9k/1/ for RegEx details)
-        dontCacheBustURLsMatching: /\.[a-z0-9]{8}\.|\d+\.\d+\.\d+/,
+        // (see https://regex101.com/r/z4Hy9k/3/ for RegEx details)
+        dontCacheBustURLsMatching: /[.-][A-Za-z0-9-_]{8}\.|\d+\.\d+\.\d+/,
     }
 
     return injectManifest(injectManifestOptions).then(logManifestOutput)

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

@@ -60,6 +60,7 @@ export function setUpServiceWorker() {
     // In development, static assets are handled by 'network first' strategy
     // and will be kept up-to-date.
     if (PRODUCTION_ENV) {
+        // todo: update comment
         // 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,
@@ -125,6 +126,7 @@ export function setUpServiceWorker() {
         // NOTE: This route must come before any precacheAndRoute calls
         registerRoute(navigationRouteMatcher, navigationRouteHandler)
 
+        // todo: update this for newer build scripts & moment locale handling
         // 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
@@ -142,19 +144,10 @@ export function setUpServiceWorker() {
         })
         precacheAndRoute(restOfManifest)
 
+        // todo: reinvestigate after switching plugin builds to Vite
         // 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`
-        // (which CRA's workbox-webpack-plugin handle smartly).
-        // Additional files to precache can be added using the
-        // `additionalManifestEntries` option in d2.config.js; see the docs and
-        // 'injectPrecacheManifest.js' in the CLI package.
-        // '[]' fallback prevents an error when switching pwa enabled to disabled
-        const sharedBuildManifest = self.__WB_BUILD_MANIFEST || []
-        precacheAndRoute(sharedBuildManifest)
     }
 
     // Handling pings: only use the network, and don't update the connection