Making Progressive Web Apps (PWAs) with React
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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.
To get started, we’ll start a new project using Create React App.
$ yarn create react-app my-app-name
Next we’re going to open up
src/index.js. All we have to do is change
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.
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.
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: