ReactJS — PWA [Installation/Setup]

This is a ReactJS — PWA Boilerplate, created using create-react-app 🚧

Rajesh Mishra
3 min readJul 18, 2021


What are Progressive Web Apps?

A progressive web application 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.

PWAs support functionality that is not available for regular websites. It includes offline work, push notifications, access to geolocation, camera, microphone, etc. A PWA can even work outside of a browser, using a native app shell that can launch at startup.

Some of the Popular PWAs:

Some pf the Popular PWAs using ReactJS:

Note: Why use ReactJS?

There is no particular reason to use ReactJS for building PWAs. It’s just my preference. You can use any Technology.

How to Build a PWA 👷

Before making our hands dirty with codes, let’s understand a few facts about PWAs.

⛽️ Following Technologies fuel the Progressive Web Apps:

  • service workers: A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.
  • web manifests: Or web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the home-screen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).
  • application shell: An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications.

Let’s start building our ReactJS — PWA 🚀

How to Install a PWA on your Device

  • Mobile Users: find an ‘Add to Home screen’ button (in the notifications provided by the website or in the browser settings).
  • Desktop Users: go to the address bar and find the install button on the right.


- Create React App :
- Lighthouse Chrome Extension:
- Link to the Boilerplate GitHub Repository:



Rajesh Mishra

A coder by profession, sharing life experiences with the Words. Learning more about Productivity, Habits, Decision Making and ambitious towards self freedom.