Using Workbox with Create React App (Without Ejecting)

Update: With CreateReact App v2 and the new opt-in for service-workers you can skip this tutorial.

More info: What’s New in Create React App 2

This is my first Medium 🎊 and I’m glad to share it with you

Workbox is a set of Javascript libraries that help you with Service Workers.

These libraries are awesome to work with Progressive Web Apps, but how can I use them in my React app? In this article, I’m going to explain how to do that.

Caveats:

1. This guide assumes some basic knowledge of PWA and the Workbox libraries.
2. This guide refers to the #2340 issue comment. To get involve, read the issue.
3. In this guide we use yarn as our dependency manager.
4. We recommend that you read the Workbox guide, specially these sections: Generating a Precache Manifest and Workbox Modules.

Creating Our React App

First, start off by moving into wherever you want to develop your application. In that directory, we’re going to create an app named react-with-workbox:

$ yarn create react-app react-with-workbox
$ cd react-with-workbox

Overriding create-react-app webpack config

We need to use react-app-rewire-workbox tweak to preserve all the benefits of create-react-app without the limitations of “no config”.

Step 1 — Add the new dependencies

$ yarn add workbox-webpack-plugin 
$ yarn add react-app-rewire-workbox 
$ yarn add react-app-rewired

Step 2— Create config-overrides.js file

Create a file in the root of your project called config-overrides.js and add this code:

We’re using the advanced configuration

Step 3— Replace the react-scripts properties

Replace react-scripts with react-app-rewired in the package.json file.

Step 4— Create custom-sw.js file

Now create a custom-sw.js file in your src/ folder and paste this code:

Step 5— Change the default service worker file name

Change the default name of your service worker to custom-sw.js in the registerServiceWorker.js file:

Building our app

Now you can build your app running this command:

$ yarn build

If you notice your build/custom-sw.js file has some changes at the top of the file with something like this:

importScripts(
  "/precache-manifest.bf924054a76af115c6aaa878be8caf73.js",
  "https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js"
);

This is good, and you have register your service worker successfully, but my service worker is importing the workbox-swmodule from its cdn repository. What happen if I don't have internet? I can't use this library. To fix it, i need to change the import method of my workboxConfig to importWorkboxFrom: 'local' in config-overrides.js file:

By default this option is cdn.

Testing our app

To test the app, we need to serve it with a static server (we use the suggested server):

$ yarn global add serve
$ serve -s build

Open your browser and navigate to http://localhost:5000.

If you choose Chrome, Open the Developer Tools and go to the Console panel to see something like this:

Chrome Console panel

Into the Application panel you will see the custom service worker activated and running, the cached files and other stuffs.

Chrome Application panel: custom service worker

Chrome Application panel: cached files

And there we have it! 🎉

We’ve looked at how to add the workbox-webpack-plugin to our create-react-app app via react-app-rewired without having to eject OR fork.

The Code

You can find the demo in this repo:

kevinah95/react-with-workbox

Hopefully, the content of this article will help you as a basis for your next PWA.

Thanks for reading!