Tutorial

Making Progressive Web Apps (PWAs) with React

Published on March 2, 2019
Default avatar

By Alex Taylor

Making Progressive Web Apps (PWAs) with React

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alex Taylor

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel