feat(cra-template): add sw-template for builded with Workbox

Author: Marlon Maxwel

packages/cra-template/template/src/sw.js renamed to packages/cra-template-typescript/template/src/sw-template.js

@@ -13,7 +13,7 @@ clientsClaim();
 
 precacheAndRoute(self.__WB_MANIFEST);
 
-const handler = createHandlerBoundToURL('/index.html');
+const handler = createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`);
 
 const navigationRoute = new NavigationRoute(handler, {
   denylist: [new RegExp('^/_'), new RegExp('/[^/?]+\\.[^/]+$')],

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/webpack.config.js

@@ -670,33 +670,11 @@ module.exports = function(webpackEnv) {
       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.
-      // isEnvProduction &&
-      //   new WorkboxWebpackPlugin.GenerateSW({
-      //     clientsClaim: true,
-      //     exclude: [/\.map$/, /asset-manifest\.json$/],
-      //     importWorkboxFrom: 'cdn',
-      //     navigateFallback: paths.publicUrlOrPath + '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('/[^/?]+\\.[^/]+$'),
-      //     ],
-      //   }),
       isEnvProduction &&
         new WorkboxWebpackPlugin.InjectManifest({
           exclude: [/\.map$/, /asset-manifest\.json$/],
-          // importWorkboxFrom: 'cdn',
-          // navigateFallback: paths.publicUrlOrPath + 'index.html',
-          swSrc: `${paths.appSrc}/sw.js`,
+          swSrc: `${paths.appSrc}/sw-template.js`,
           swDest: `${paths.appBuild}/service-worker.js`,
-          // globDirectory: paths.appBuild,
-          // importScripts: [
-          //   'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',
-          // ],
         }),
       // TypeScript type checking
       useTypeScript &&