Service worker precaching in Create React App

Workbox ships with Create React App (CRA) and is configured out of the box to precache all static assets on each production build. Enabling it requires just two steps: register the service worker in src/index.js, and build the app.

The payoff is significant for repeat visitors. With precaching, the service worker stores key resources locally during the first visit. On subsequent loads, the browser retrieves those files from the service worker cache instead of the network. That means faster page loads and the ability to serve content when there is no connection.

What Workbox does in CRA

Workbox is a set of libraries for generating and managing service workers. The workbox-webpack-plugin is bundled into CRA's production build, but the service worker is not active until you enable it. In src/index.js, uncomment the registration call:

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();

Once registered, you can verify what is cached:

  • Preview the site and open it in fullscreen fullscreen.
  • Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  • Go to the Network tab and reload the app.

Instead of showing a payload size, the Size column now shows (from ServiceWorker) for served resources, confirming they come from the cache.

Network requests with a service worker

You can also test offline behavior:

  1. In the DevTools Network tab, check the Offline box.
  2. Reload the app.

The app continues to work identically without a network connection because all static assets are already cached.

Working with the default strategy

CRA sets Workbox to a cache-first strategy: the service worker looks for a resource in its cache, and only if that fails falls back to the network. This is what enables offline support and faster repeat loads.

Workbox itself supports fine-grained control over caching strategies for static and dynamic resources, but CRA's default configuration cannot be altered without ejecting. There is an open proposal to add support for an external workbox.config.js file, which would let developers override the defaults by creating a single configuration file.

Keep in mind that a cache-first strategy raises practical questions: how to test service worker caching reliably, and whether users need to be told when they are viewing cached content. The CRA documentation addresses these issues in detail.

Making precaching part of your build

Service worker precaching is a low-effort way to improve repeat-visit performance and add offline resilience:

  1. In CRA, enable the pre-configured service worker in src/index.js.
  2. Outside of CRA, add a Workbox library such as workbox-webpack-plugin to your build pipeline.
  3. Track the GitHub issue for when CRA ships workbox.config.js support.