feat(react-scripts): add support to generateSW and injectManifest

Author: Marlon Maxwel

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,7 @@ if (
     ownNodeModules: resolveOwn('node_modules'),
     appTypeDeclarations: resolveOwn(`${templatePath}/src/react-app-env.d.ts`),
     ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
+    serviceWorkerTemplate: resolveModule(resolveApp, '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,6 +674,25 @@ 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',
+          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
+            // 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('/[^/?]+\\.[^/]+$'),
+          ],
+        }),
+      // 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'}`,