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

README.md

@@ -16,6 +16,7 @@ npx create-react-app my-app
 cd my-app
 npm start
 ```
+
 If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that npx always uses the latest version.
 
 _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_

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/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

@@ -53,6 +53,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$/;
@@ -671,12 +674,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
@@ -686,6 +689,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

@@ -79,7 +79,10 @@
     "webpack": "4.41.5",
     "webpack-dev-server": "3.10.2",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "workbox-core": "5.0.0",
+    "workbox-precaching": "5.0.0",
+    "workbox-routing": "5.0.0",
+    "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 },