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.

Alexander Esser

~ 6 years ago

NB; This code might/will fail when using react-scripts > 2.1.1 (https://github.com/timarney/react-app-rewired/issues/343)

Alexander Esser

~ 6 years ago

NB: This code will fail when using react-scripts higher 2.1.1 (https://github.com/timarney/react-app-rewired/issues/343)

OndeVai

~ 6 years ago

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 } } }

Andre Souza

~ 5 years ago

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

Sebastian Ricarde

~ 5 years ago

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 👌

Héctor BlisS

~ 5 years ago

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!