Back to home

Creating the React AppBuild and serveMake changes to your React AppResources and further reading
Prompting New App Versions With The Service Worker And Create-React-App main image

Prompting New App Versions With The Service Worker And Create-React-App

Service workers can a powerful utility to increasing performance in your app. They provide some powerful caching mechanisms and modern capabilities, however, they are generally misunderstood in web development.

A common misconception is that when new content is available, it will only be loaded once all tabs for your progressive web app are closed.

While this can be the default behaviour, you can speed this process up by skipping the wait and prompting the user to update.

In this short tutorial, we will do just that to a Create React App setup.

Creating the React App

We will used npx create-react-app and install Vercel's serve globally to serve our build.

1 2 3 4 npx create-react-app hello-cra-push-notifications cd hello-sw-push-notifications # We'll use this to serve our app npm i -g serve

Before building, let's update index.js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); // Changes made here serviceWorker.register({ onUpdate: (registration) => { const waitingServiceWorker = registration.waiting; if (waitingServiceWorker) { waitingServiceWorker.addEventListener("statechange", (event) => { if (event.target.state === "activated") { if ( window.confirm( "There is a new version of the app ready. Please reload to update." ) ) { window.location.reload(); } } }); waitingServiceWorker.postMessage({ type: "SKIP_WAITING" }); } }, });

Here we are adding out magic code for the onUpdate handler that CRA provides for us out-of-the-box.

In this code, we will check if there is a service worker waiting from file changes. If so, we simply add an event for a state change and post a message to SKIP_WAITING.

Now, the next time we reload the app, we will be prompted with a confirm dialog to reload the page with our latest updates!

There is still the option for the user to deny the change if they wish.

Build and serve

Let's get our build up and going:

1 2 yarn build serve build

Now at port 5000 (or whatever you have), you will see the usual CRA basic that has been built.

Let's make some changes and see our prompt in action!

Make changes to your React App

Update the app to have whatever you want. This can include changes to the styles, etc. (I have done this in my example image below).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import React from "react"; import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Make changes</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;

Once you are happy, simply run yarn build.

If you reload the React App on port 5000, after a few moments you'll see the following show up in the console:

Console log informing that a new Service Worker is ready

Console log informing that a new Service Worker is ready

In fact, that log is the precursor right before our custom onUpdate hook comes into play. At the same time you will have that window dialog show up on the screen:

Window dialog prompting to reload

Window dialog prompting to reload

If we accept (and you can cancel if you want), you will see our updated app!

Post-reload

Post-reload

Victory!

Of course, you don't have to use the window dialog. Once that notification comes through, you can do whatever your heart desires to let the user know that they can update their app on reload. In fact, you could be rude and just reload the page on them (although I wouldn't!).

As a final note, this is supported in most major browsers but with the caveat that Safari iOS does not support this. The trade-off is your to make!

Resources and further reading

  1. Window Dialog
  2. Service Worker API
  3. Service Worker Post Message
  4. Service Worker Waiting Compatibility

Image credit: Clément H

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.