Switched to WorkboxWebpackPlugin.InjectManifest from WorkboxWebpackPlugin.GenerateSW

packages/cra-template-typescript/template/src/service-worker.js

@@ -0,0 +1,28 @@
+/* eslint-disable no-restricted-globals */
+
+self.addEventListener("message", event => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+// eslint-disable-next-line no-undef
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+// eslint-disable-next-line no-undef
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+// eslint-disable-next-line no-undef
+workbox.routing.registerNavigationRoute(
+  // eslint-disable-next-line no-undef
+  workbox.precaching.getCacheKeyForURL("/index.html"),
+  {
+    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/]
+  }
+);

packages/cra-template/template/src/service-worker.js

@@ -0,0 +1,28 @@
+/* eslint-disable no-restricted-globals */
+
+self.addEventListener("message", event => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+// eslint-disable-next-line no-undef
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+// eslint-disable-next-line no-undef
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+// eslint-disable-next-line no-undef
+workbox.routing.registerNavigationRoute(
+  // eslint-disable-next-line no-undef
+  workbox.precaching.getCacheKeyForURL("/index.html"),
+  {
+    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/]
+  }
+);

packages/react-scripts/config/paths.js

@@ -81,6 +81,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
@@ -104,6 +105,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
@@ -140,6 +142,7 @@ if (
     appPublic: resolveOwn(`${templatePath}/public`),
     appHtml: resolveOwn(`${templatePath}/public/index.html`),
     appIndexJs: resolveModule(resolveOwn, `${templatePath}/src/index`),
+    appServiceWorkerJs: resolveModule(resolveOwn, `${templatePath}/src/service-worker`),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn(`${templatePath}/src`),
     appTsConfig: resolveOwn(`${templatePath}/tsconfig.json`),

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

@@ -50,6 +50,9 @@ const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
 
+// Check if Service Worker is setup
+const useServiceWorker = fs.existsSync(paths.appServiceWorkerJs);
+
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
@@ -170,6 +173,9 @@ module.exports = function(webpackEnv) {
       // require.resolve('webpack/hot/dev-server'),
       isEnvDevelopment &&
         require.resolve('react-dev-utils/webpackHotDevClient'),
+      // Add service worker if it's available.
+      isEnvProduction && useServiceWorker &&
+        paths.appServiceWorkerJs,
       // Finally, this is your app's code:
       paths.appIndexJs,
       // We include the app code last so that if there is a runtime error during
@@ -674,23 +680,15 @@ module.exports = function(webpackEnv) {
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
+      // Inject a manifest into a service worker script that would allow
+      // precaching, and keep up to date, the HTML & assets that are part of
+      // the Webpack build.
       isEnvProduction &&
-        new WorkboxWebpackPlugin.GenerateSW({
-          clientsClaim: true,
+        useServiceWorker &&
+        new WorkboxWebpackPlugin.InjectManifest({
+          swSrc: paths.appServiceWorkerJs,
           exclude: [/\.map$/, /asset-manifest\.json$/],
           importWorkboxFrom: 'cdn',
-          navigateFallback: publicUrl + '/index.html',
-          navigateFallbackBlacklist: [
-            // 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
-            // as they're likely a resource and not a SPA route.
-            // URLs containing a "?" character won't be blacklisted as they're likely
-            // a route with query params (e.g. auth callbacks).
-            new RegExp('/[^/?]+\\.[^/]+$'),
-          ],
         }),
       // TypeScript type checking
       useTypeScript &&