Use a Custom Service Worker in a create-react-app PWA without Ejecting
Share this video with your friends
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.
NB; This code might/will fail when using react-scripts > 2.1.1 (https://github.com/timarney/react-app-rewired/issues/343)
NB: This code will fail when using react-scripts higher 2.1.1 (https://github.com/timarney/react-app-rewired/issues/343)
I got it to work using Craco (https://github.com/sharegate/craco/blob/master/packages/craco/README.md):
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
module.exports = { webpack: { alias: {}, plugins: [], configure: (webpackConfig, other) => { ///console.log('----crackass webpackConfig', webpackConfig) webpackConfig.plugins = webpackConfig.plugins.map(plugin => { if (plugin.constructor.name === 'GenerateSW') { return new WorkboxWebpackPlugin.InjectManifest({ swSrc: './src/sw.js', swDest: 'service-worker.js' }) } return plugin }) return webpackConfig } } }
New versions of creat-react-app will have the funcrtions skipWaiting and clientsClaim in the core package so instead of workbox.skipWaiting() use workbox.core.skipWaiting()
by Ernesto
New versions of creat-react-app will have the funcrtions skipWaiting and clientsClaim in the core package so instead of workbox.skipWaiting() use workbox.core.skipWaiting()
by Ernesto
Thank you 👌
New versions of creat-react-app will have the funcrtions skipWaiting and clientsClaim in the core package so instead of workbox.skipWaiting() use workbox.core.skipWaiting()
by Ernesto
Muchas gracias!