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
[React] Override webpack config for create-react-app without ejection