The default service worker that comes with create-react-app doesn't allow for very much configuration. We'll replace that default service worker in two ways.

First, we'll create a blank service worker js file, and use that as our custom service worker.

Next, we'll re-write the default webpack config with react-app-rewired, and utilize the InjectManifest workbox webpack plugin. This will allow us to create a totally custom service worker that still allows us to use workbox, without ejecting our app.

 

Install:

"react-app-rewired": "^1.6.2",    "react-scripts": "^2.1.1",    "serve": "^10.1.1",    "workbox-webpack-plugin": "^3.6.3"

 

Create a config-overrides.js in root folder:

Default create-react-app using 'GenerateSW' function, we want to override with 'InjectManifest' function. 

/* config-overrides.js */const WorkboxWebpackPlugin = require('workbox-webpack-plugin')module.exports = function override(config, env) {  config.plugins = config.plugins.map(plugin => {    if(plugin.constructor.name === 'GenerateSW') {      return new WorkboxWebpackPlugin.InjectManifest({        swSrc: './src/sw.js', // point to the sw.js file we will create later        swDest: 'service-worker.js' // will be generatedin pulbic folder      })    }    return plugin  })  return config}

 

Update package.json:

"scripts": {    "start": "react-app-rewired start",    "build": "react-app-rewired build",    "build:serve": "serve -s build",    "test": "react-app-rewired test",    "eject": "react-scripts eject"  },

 

Create src/sw.js:

workbox.skipWaiting();workbox.clientsClaim();

 

Run:

npm run build