How to implement Custom Service worker in create-react-app without eject.

Alok Kumar
Feb 14 · 3 min read

Note: This post only cover about how we can configure our custom service worker in our react app which is developed using create-react-app. I am assuming that you know, what is service-worker and its events.

So, as we know that web apps only missing some feature which is only provided by native apps like push-notification. But now using service-worker we can easily achieve all the feature of native apps into our web apps. The web Apps who comes with these features are also called as Progressive web Apps.

Custom Service Worker in CRA

Without wasting your time let’s dive directly into it. CRA already comes with service-worker but it can only used during build time means you can’t run any side-effect dynamically. It only caches static assests which are present during build time. We can’t cache any dynamic data using provided service worker.

So, let’s start adding our custom service worker in our project.

Create a file sw.js in your src directory, sw.js is the file which contains all our logic which we want to implement in our custom service-worker file.

For including this file into our production build we have to install some dependencies like react-app-rewired, and workbox-webpack-plugin :-

npm install react-app-rewired workbox-webpack-plugin

Simply react-app-rewired helps you to override the original config of CRA without ejecting the CRA and workbox-webpack-plugin provide a method called InjectManifest which takes our source of service-worker file and generate a service-worker in production build.

First of all you have to change the command which run our react app in package.json file i.e

Before :

“start”: “react-scripts start”,

“build”: “react-scripts build”,

“test”: “react-scripts test”,

“eject”: “react-scripts eject”

After :

“start”: “react-app-rewired start”,

“build”: “react-app-rewired build”,

“test”: “react-app-rewired test”,

“eject”: “react-app-rewired eject”

By replacing react-scripts from react-app-rewired we can now override the original config of CRA because react-app-rewired looks for config-overrides.js file in root folder of project which contains all the modified config of loaders, plugins.

So, let’s create a file config-overrides.js in our root folder i.e(where index.js or package.json file present).

touch config-overrides.js

Now as we have to modify the behaveiour of workbox-webpack-plugin paste the below code into your 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',
swDest: 'service-worker.js'
})
}
return plugin
})
return config;}

That’s it you successfully configured your custom service worker in CRA. Go to your sw.js file and put these lines.

self.addEventListener(‘install’, event => { console.log(“install”) })

self.addEventListener(‘activate’, event => { console.log(‘activate’) })

Now build your project and run the project in production mode.

npm run build

serve -s build

Now you can see above console log in console tab.

Thank you very much for reading this post. Please comment if you have any question regarding this topic and press the green button below if you learn something from this post :):)

The Startup

Alok Kumar

Written by

author of gatsby-theme-plone | GSOC 2019 PSF | collaborator of taskcluster(Mozilla) | Maintainer of Gatsby | Contributor to Iodide and open source project

The Startup

Medium's largest active publication, followed by +588K people. Follow to join our community.

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade