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 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.

CODE: https://gist.github.com/velotiotech/b55c9e13712cbaa92f0bbebb347220b7.js

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

CODE: https://gist.github.com/velotiotech/83604a4fed019a802fc33d119b53f3d3.js

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

• In the file /src/index.js, replace serviceWorker.unregister() with serviceWorker.register().

CODE: https://gist.github.com/velotiotech/b5f5357fd5fc0c5b81ee28d8ad00a02f.js

• The default behavior here is to not set up a service worker, i.e. the CRA boilerplate allows the users to opt-in for the offline-first experience.

2. Update the manifest file

• The CRA boilerplate provides a manifest file out of the box. This file is located at /public/manifest.json and needs to be modified to include the name of the PWA, description, splash screen configuration and much more. You can read more about available configuration options in the manifest file here.

Our modified manifest file looks like this:

CODE: https://gist.github.com/velotiotech/637c75ac45f2764b3404affb07bd2214.js

‍

Here the display mode selected is “standalone” which tells the web browsers to give this PWA the same look and feel as 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.

‍

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.‍

CODE: https://gist.github.com/velotiotech/b5388afd82c1ce1fcaad4edf0ff68fc1.js

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 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.

• Install react-app-rewired and update package.json:

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

CODE: https://gist.github.com/velotiotech/5c71d191ed68a0fc4d5455c60384f295.js

• Create a config file to override how CRA generates service workers and inject our custom service worker, i.e. combine the two service worker files.

CODE: https://gist.github.com/velotiotech/419da233a9a5962f9ab4440d258a299d.js

• Create service-worker-custom.js file and cache network request in there:

CODE: https://gist.github.com/velotiotech/c8f08caca88b018f96dcfd1f9104419e.js

Your app should now work correctly in the 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 native-live experience, better engagement via features, such as add to homescreen, push notifications and more without any installation process.