Building a Progressive Web Application in React [With Live Code Examples]

What is PWA:

A Progressive Web Application or PWA is a web application that is built to look and behave like native apps, operates offline-first, is optimized for a variety of viewports ranging from mobile, tablets to FHD desktop monitors and more. PWAs are built using front-end technologies such as HTML, CSS, and JavaScript and bring a native-like user experience to the web platform. PWAs can also be installed on devices just like native apps.

For an application to be classified as a PWA, it must tick all of these boxes:

• PWAs must implement service workers. Service workers act as a proxy between the web browsers and API servers. This allows web apps to manage and cache network requests and assets
• PWAs must be served over a secure network, i.e. the application must be served over HTTPS
• PWAs must have a web manifest definition, which is a JSON file that provides basic information about the PWA, such as name, different icons, look and feel of the app, splash screen, version of the app, description, author, etc

Why build a PWA?

Businesses and engineering teams should consider building a progressive web app instead of a traditional web app. Here are some of the most prominent arguments in favor of PWAs:

• PWAs are responsive. The mobile-first design approach enables PWAs to support a variety of viewports and orientation
• PWAs can work on slow Internet or no Internet environment. App developers can choose how a PWA will behave when there’s no Internet connectivity, whereas traditional web apps or websites simply stop working without an active Internet connection
• PWAs are secure because they are always served over HTTPS
• PWAs can be installed on the home screen, making the application more accessible
• PWAs bring in rich features, such as push notification, application updates, and more

PWA and React

There are various ways to build a progressive web application. One can just use Vanilla JS, HTML, and CSS or pick up a framework or library. Some of the popular choices in 2020 are Ionic, Vue, Angular, Polymer, and of course React, which happens to be my favorite front-end library.

Building PWAs with React

To get started, let’s create a PWA which lists all the users in a system.

Next, we will replace the default App.js file with our own implementation.

This displays a list of users fetched from the server.

Let’s also remove the logo.svg file inside the src directory and truncate the App.css file that is populated as a part of the boilerplate code.

To make this app a PWA, we need to follow these steps:

1. Register service worker

2. Update the manifest file

Our modified manifest file looks like this:

PWA Splash Screen

Here the display mode selected is “standalone” which tells the web browsers to give this PWA the same look and feel like that of a standalone app. Other display options include, “browser,” which is the default mode and launches the PWA like a traditional web app, and “fullscreen,” which opens the PWA in fullscreen mode — hiding all other elements such as navigation, the address bar, and the status bar.

The manifest can be inspected using Chrome dev tools > Application tab > Manifest.

1. Test the PWA:

• To test a progressive web app, build it completely first. This is because PWA features, such as caching aren’t enabled while running the app in dev mode to ensure hassle-free development
• Create a production build with: npm run build
• Change into the build directory: cd build
• Host the app locally: http-server or python3 -m http.server 8080‍
• Test the application by logging in to http://localhost:8080‍

2. Audit the PWA: If you are testing the app for the first time on a desktop or laptop browser, PWA may look like just another website. To test and audit various aspects of the PWA, let’s use Lighthouse, which is a tool built by Google specifically for this purpose.

PWA on mobile

At this point, we already have a simple PWA which can be published on the Internet and made available to billions of devices. Now let’s try to enhance the app by improving its offline viewing experience.

1. Offline indication: Since service workers can operate without the Internet as well, let’s add an offline indicator banner to let users know the current state of the application. We will use navigator.onLine along with the “online” and “offline” window events to detect the connection status. ‍

The easiest way to test this is to just turn off the Wi-Fi on your dev machine. Chrome dev tools also provide an option to test this without actually going offline. Head over to Dev tools > Network and then select “Offline” from the dropdown in the top section. This should bring up the banner when the app is offline.

2. Let’s cache a network request using a service worker

CRA comes with its own service-worker.js file which caches all static assets such as JavaScript and CSS files that are a part of the application bundle. To put custom logic into the service worker, let’s create a new file called ‘custom-service-worker.js’ and combine the two.

1. yarn add react-app-rewired
2. Update the package.json as follows:

Your app should now work correctly in offline mode.

Distributing and publishing a PWA

‍PWAs can be published just like any other website and only have one additional requirement, i.e. it must be served over HTTPS. When a user visits PWA from mobile or tablet, a pop-up is displayed asking the user if they’d like to install the app to their home screen.

Conclusion

Building PWAs with React enables engineering teams to develop, deploy, and publish progressive web apps for billions of devices using technologies they’re already familiar with. Existing React apps can also be converted to a PWA. PWAs are fun to build, easy to ship and distribute, and add a lot of value to customers by providing a native-live experience, better engagement via features, such as add to the home screen, push notifications, and more without any installation process.

Originally published at https://www.velotio.com.