React JS

Add offline Support to Create React App with Workbox #3

Caching assets with a service worker can speed up repeat visits and provide offline support. Workbox makes this easy and is included in Create React App by default.

Golang Community Moderator. Software Engineer - Open Source Enthusiast. Goper Lover

Published · May 8 2019

  

If you don't yet understand the basic idea behind service workers and precaching, read the Precaching with Workbox guide first.

Workbox is built into Create React App (CRA) with a default configuration that precaches all the static assets in your application with every build.

  
Why is this useful? #
Service workers enable you to store important resources in its cache (precaching) so that when a user loads the web page for a second time, the browser can retrieve them from the service worker instead of making requests to the network. This results in faster page loads on repeat visits as well as the ability to surface content when the user is offline.

Workbox in CRA #
Workbox is a collection of tools that allow you create and maintain service workers. In CRA, the workbox-webpack-plugin is already included into the production build and only needs to be enabled in the src/index.js file in order to register a new service worker with every build:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

Here is an example of a React app built with CRA that has a service worker enabled through this file:


In order to see which assets are being cached:
Mouse over the editor and press the Show button to preview the app.
Open the DevTools by pressing CMD + OPTION + i / CTRL + SHIFT + i.
Click on the Network tab.
Reload the application.

You'll notice that instead of showing the payload size, the Size column shows a (from ServiceWorker) message to indicate that these resources were retrieved from the service worker.

  
Since the service worker caches all static assets, try to use the application while offline:
In the Network tab in DevTools, enable the Offline checkbox to simulate an offline experience.
Reload the application.

The application works in exactly the same way, even without a network connection!

Modifying caching strategies #
The default precaching strategy used by Workbox in CRA is cache-first, where all static assets are fetched from the service worker cache and if that fails (if the resource is not cached for example), the network request is made. This is how content can still be served to users even when they are in a complete offline state.

Although Workbox provides support to define different strategies and approaches to caching static and dynamic resources, the default configuration in CRA cannot be modified or overwritten unless you eject entirely. However, there is an open proposal to explore adding support for an external workbox.config.js file. This would allow developers to override the default settings by just creating a single workbox.config.js file.

For more details on all the caching strategies that a service worker can use, take a look at the Offline Cookbook.

Handling a cache-first strategy #
Relying on the service worker cache first and then falling back to the network is an excellent way to build sites that load faster on subsequent visits and work offline to some extent. However, there are a few things that need to be taken into consideration:
How can caching behaviours by a service worker be tested?
Should there be a message for users to let them know they are looking at cached content?
The CRA documentation explains these points, and more, in detail.

Conclusion #
Use a service worker to precache important resources in your application to provide a faster experience for your users as well as offline support.
If you are using CRA, enable the pre-configured service worker in src/index.js.
If you are not using CRA to build a React application, include one of the many libraries Workbox provides, such as workbox-webpack-plugin, into your build process.
Keep an eye out for when CRA will support a workbox.config.js override file in this GitHub issue.