Making Progressive Web Apps (PWAs) with React

Progressive Web Applications, or PWAs, allow web developers to create web apps that can behave more like native applications.

A huge selling point of PWAs is that they can work with poor network connectivity, or even with no connectivity at all! They accomplish this by caching the web app’s assets and — when possible — downloading any updates in the background. Another benefit of PWAs is that they allow web apps to access native features such as push notifications. They can also be added to the user’s home screen for ease of access.

In this short tutorial we will be going over how to create a PWA using React and create-react-app.

Getting Started

To get started, we’ll start a new project using Create React App.

$ yarn create react-app my-app-name

Notice here we’re using the create command from Yarn.

Next we’re going to open up src/index.js. All we have to do is change unregister to register for the service worker, because the service worker is now opt-in by default instead of opt-out:

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

// Changed from 'unregister' to 'register'
serviceWorker.register();

That’s it! We’ve enabled our service worker, and our React application will now work offline. It’ll only work in a production environment, however, so if you’d like to try it out, you first have to create a build:

$ yarn build

# If you'd like to serve it locally:
$ yarn global add serve
$ serve -s build

Keep in mind too that the app will work offline and its shell will always be accessible, but it’s not magic either and fresh data that needs to be fetched via Ajax as part of your app’s functionality won’t be fetched while offline. So you’ll want to build failsafes and app notifications/toasts around that to inform your users.

And if you want to customize how your PWA appears to your users, you can edit the web app manifest located at public/manifest.json. Here, you can set the name, icons, and theme of your application.

Caveats

Converting a Create React App application to a PWA is incredibly simple, but it’s opt-in for a good reason. Before deploying your PWA, there are a few very important things that you have to be aware of.

The first is that you need to be serving your web application over HTTPS. Service workers only work on web apps that are served over HTTPS, with the only exception being when you’re testing on localhost.

Secondly, cached assets can’t be updated until all open tabs are closed. This is because there could be issues if different tabs are running different versions of your service worker. This is something that users might not understand immediately, which brings us to our next point.

Lastly, users may not be familiar with progressive web apps. Therefore, it’s important to create a message for the user informing them that the app works offline, or that the app cannot update until all other tabs are closed. To do this, you can modify the file located at src/serviceWorker.js. By default, this file simply prints this information using console.log, but you’d want to add some custom functionality to actually display these messages to your users.

Learn More

This was just a brief intro to whet your appetite, and here a few more resources about progressive web apps and their usage with Create React App:

• Making a Progressive Web App from the Create React App documentation.
• An overview of PWAs by Google.