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

What is PWA:

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?

  • 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

Building PWAs with React

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 generated by config defined in manifest.json
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 install on a mobile device
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

Conclusion

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Velotio Technologies

Velotio Technologies is an outsourced software and product development partner for technology startups & enterprises. #Cloud #DevOps #ML #UI #DataEngineering