Progressive Web App (PWA) using React

Develop a progressive web application using React.

Progressive Web Application

Overview

In this article, let’s develop a progressive web application using React.

From Wikipedia,

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Setup

Let’ start by creating a progressive web application using create-react-app and the PWA template.

npx create-react-app react-pwa-app --template cra-template-pwa

I use the Javascript template. For Typescript, use cra-template-pwa-typescript.

I am going to leverage the sample code I developed in my previous article to display a dynamic grid with user details and dropdowns of countries and cities.

React Grid with Dynamic Dropdown and Selection

The sample application shall look like below. You can find the code in this repository.

Sample React App.

Benchmark

Now let’s benchmark the application for PWA. I am going to build the application and serve the build.

yarn build
yarn global add serve
serve -s build

Build and Serve App

Using Google Chrome or Brave browser, navigate to http://localhost:5000and open the Developer Tools. I am going to use LightHouse to generate a report.