feat(react-scripts): configure injectManifest with workbox v5

Author: Marlon Maxwel

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

@@ -1,17 +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();
   }
 });
 
-workbox.core.clientsClaim();
+clientsClaim();
 
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+precacheAndRoute(self.__WB_MANIFEST);
 
-workbox.routing.registerNavigationRoute(
-  workbox.precaching.getCacheKeyForURL('/index.html'),
-  {
-    blacklist: [new RegExp('^/_'), new RegExp('/[^/?]+\\.[^/]+$')],
-  }
-);
+const handler = createHandlerBoundToURL('/index.html');
+
+const navigationRoute = new NavigationRoute(handler, {
+  denylist: [new RegExp('^/_'), new RegExp('/[^/?]+\\.[^/]+$')],
+});
+
+registerRoute(navigationRoute);

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

@@ -693,10 +693,10 @@ module.exports = function(webpackEnv) {
           // navigateFallback: paths.publicUrlOrPath + 'index.html',
           swSrc: `${paths.appSrc}/sw.js`,
           swDest: `${paths.appBuild}/service-worker.js`,
-          globDirectory: paths.appBuild,
-          importScripts: [
-            'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',
-          ],
+          // globDirectory: paths.appBuild,
+          // importScripts: [
+          //   'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',
+          // ],
         }),
       // TypeScript type checking
       useTypeScript &&

packages/react-scripts/package.json

@@ -79,7 +79,7 @@
     "webpack": "4.41.5",
     "webpack-dev-server": "3.10.2",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "workbox-webpack-plugin": "5.0.0"
   },
   "devDependencies": {
     "react": "^16.12.0",