Add support to customize the Service Worker with InjectManifest and Workbox v5

packages/babel-preset-react-app/README.md

@@ -53,6 +53,7 @@ Make sure you have a `tsconfig.json` file at the root directory. You can also us
 ```
 
 ## Absolute Runtime Paths
+
 Absolute paths are enabled by default for imports. To use relative paths instead, set the `absoluteRuntime` option in `.babelrc` to `false`:
 
 ```

packages/cra-template-typescript/template.json

@@ -8,7 +8,10 @@
       "@types/react": "^16.9.0",
       "@types/react-dom": "^16.9.0",
       "@types/jest": "^24.0.0",
-      "typescript": "^3.8.0"
+      "typescript": "^3.8.0",
+      "workbox-core": "5.0.0",
+      "workbox-precaching": "5.0.0",
+      "workbox-routing": "5.0.0"
     }
   }
 }

packages/cra-template-typescript/template/src/sw-template.ts

@@ -0,0 +1,23 @@
+import { clientsClaim } from 'workbox-core';
+import { NavigationRoute, registerRoute } from 'workbox-routing';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+
+declare let self: ServiceWorkerGlobalScope;
+
+self.addEventListener('message', function(event: ExtendableMessageEvent) {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+clientsClaim();
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+const handler = createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`);
+
+const navigationRoute = new NavigationRoute(handler, {
+  denylist: [new RegExp('^/_'), new RegExp('/[^/?]+\\.[^/]+$')],
+});
+
+registerRoute(navigationRoute);

packages/cra-template/template.json

@@ -3,7 +3,10 @@
     "dependencies": {
       "@testing-library/react": "^9.3.2",
       "@testing-library/jest-dom": "^4.2.4",
-      "@testing-library/user-event": "^7.1.2"
+      "@testing-library/user-event": "^7.1.2",
+      "workbox-core": "5.0.0",
+      "workbox-precaching": "5.0.0",
+      "workbox-routing": "5.0.0"
     }
   }
 }

packages/cra-template/template/src/sw-template.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-restricted-globals */
+import { clientsClaim } from 'workbox-core';
+import { NavigationRoute, registerRoute } from 'workbox-routing';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+
+self.addEventListener('message', function(event) {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+clientsClaim();
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+const handler = createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`);
+
+const navigationRoute = new NavigationRoute(handler, {
+  denylist: [new RegExp('^/_'), new RegExp('/[^/?]+\\.[^/]+$')],
+});
+
+registerRoute(navigationRoute);

packages/react-scripts/config/paths.js

@@ -73,6 +73,7 @@ module.exports = {
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrlOrPath,
+  serviceWorkerTemplate: resolveModule(resolveApp, 'src/sw-template'),
 };
 
 // @remove-on-eject-begin
@@ -100,6 +101,7 @@ module.exports = {
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
   appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
   ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
+  serviceWorkerTemplate: resolveModule(resolveApp, 'src/sw-template'),
 };
 
 const ownPackageJson = require('../package.json');
@@ -135,6 +137,10 @@ if (
     ownNodeModules: resolveOwn('node_modules'),
     appTypeDeclarations: resolveOwn(`${templatePath}/src/react-app-env.d.ts`),
     ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
+    serviceWorkerTemplate: resolveModule(
+      resolveOwn,
+      `${templatePath}/src/sw-template`
+    ),
   };
 }
 // @remove-on-eject-end

packages/react-scripts/config/webpack.config.js

@@ -60,6 +60,9 @@ const imageInlineSizeLimit = parseInt(
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// Check if service worker template is setup
+const useServiceWorkerTemplate = fs.existsSync(paths.serviceWorkerTemplate);
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -682,12 +685,12 @@ module.exports = function(webpackEnv) {
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
       isEnvProduction &&
+        !useServiceWorkerTemplate &&
         new WorkboxWebpackPlugin.GenerateSW({
           clientsClaim: true,
           exclude: [/\.map$/, /asset-manifest\.json$/],
-          importWorkboxFrom: 'cdn',
           navigateFallback: paths.publicUrlOrPath + 'index.html',
-          navigateFallbackBlacklist: [
+          navigateFallbackDenylist: [
             // Exclude URLs starting with /_, as they're likely an API call
             new RegExp('^/_'),
             // Exclude any URLs whose last part seems to be a file extension
@@ -697,6 +700,14 @@ module.exports = function(webpackEnv) {
             new RegExp('/[^/?]+\\.[^/]+$'),
           ],
         }),
+      // If app has file sw-template.js, workbox use this configuration for generate a advanced config based in template
+      isEnvProduction &&
+        useServiceWorkerTemplate &&
+        new WorkboxWebpackPlugin.InjectManifest({
+          exclude: [/\.map$/, /asset-manifest\.json$/],
+          swSrc: `${paths.appSrc}/sw-template.${useTypeScript ? 'ts' : 'js'}`,
+          swDest: `${paths.appBuild}/service-worker.js`,
+        }),
       // TypeScript type checking
       useTypeScript &&
         new ForkTsCheckerWebpackPlugin({

packages/react-scripts/package.json

@@ -81,7 +81,7 @@
     "webpack": "4.42.0",
     "webpack-dev-server": "3.10.3",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "workbox-webpack-plugin": "5.0.0"
   },
   "devDependencies": {
     "react": "^16.12.0",

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -99,7 +99,7 @@ function verifyTypeScriptSetup() {
       parsedValue: ts.ScriptTarget.ES5,
       suggested: 'es5',
     },
-    lib: { suggested: ['dom', 'dom.iterable', 'esnext'] },
+    lib: { suggested: ['dom', 'dom.iterable', 'esnext', 'webworker'] },
     allowJs: { suggested: true },
     skipLibCheck: { suggested: true },
     esModuleInterop: { suggested: true },

tasks/e2e-installs.sh

@@ -51,7 +51,7 @@ function exists {
 # Check for accidental dependencies in package.json
 function checkDependencies {
   if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
-  grep -v -q -E '^\s*"(@testing-library\/.+)|(react(-dom|-scripts)?)"'; then
+  grep -v -q -E '^\s*"(@testing-library\/.+)|(react(-dom|-scripts)?)|(workbox-\w*)"'; then
    echo "Dependencies are correct"
   else
    echo "There are extraneous dependencies in package.json"
@@ -62,7 +62,7 @@ function checkDependencies {
 # Check for accidental dependencies in package.json
 function checkTypeScriptDependencies {
   if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
-  grep -v -q -E '^\s*"(@testing-library\/.+)|(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then
+  grep -v -q -E '^\s*"(@testing-library\/.+)|(@types\/.+)|typescript|(react(-dom|-scripts)?)|(workbox-\w*)"'; then
    echo "Dependencies are correct"
   else
    echo "There are extraneous dependencies in package.json"