How to Make Progressive Web Application with ReactJS?

What are Progressive web apps(PWAs)?

PWAs can be defined as a hybrid app of regular web pages to provide an engaging mobile experience. It has privileges to work in offline mode as it’s using Service workers. It provides a reliable experience for the user beyond the network state. as well as PWAs can be installed on the user’s home screens without uploading on the app store. There is high number of ReactJS development company developing PWAs web application.

In this blog, you will go through the below points:

• Prerequisites
• Setup of React app
• Use of Audit tab in chrome browser
• Service worker in detail
• Register – unregister Service worker
• Check PWA working
• Advantages and Dis-Advantages of PWAs
• Conclusion

1. Prerequisites

Before starting, let’s make sure that we have the required environment to create PWAs.

First, check whether NodeJs is the latest version. If you don’t have it you can download it from its official site: https://nodejs.org/en/. that’s all you require. other things we will install with blog understanding.

2. Setup React App

As we are going to create a PWA app in ReactJs. You will require a “create-react-app” package installed globally in your system. It will be used to create the React App boilerplate.

To install “create-react-app”

npm install -g create-react-app

Create a project using the below command :

create-react-app PWA-task-manager

Note: Go to the project root directory and install dependencies if it does not get installed with the above commands.

npm install

3. Use of Audit tab in chrome browser

Audit tab in Google chrome is to check the performance, accessibility, progressive web apps, etc of the website. There are multiple options available there. 

Click on the Run audit will generate a report through the lighthouse automatically. we are checking for PWAs only so it will look like this.

4. Service worker in detail

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. to explore more about Service workers:
https://developers.google.com/web/
fundamentals/primers/service-workers
Service workers enable PWAs to load instantly and provide instant great user experience,  beyond the network state. It pre-cache key resources on the client-side.

5. Register – unregister Service worker

If you are having an approach of using index.html file for root file then you can simply register service-worker by putting code in the script tag.

If you want to register service-worker in react app through index.js file then your initial file will look like this. there will be a pre-written code in index.js.

serviceWorker.unregister();

Unregister function is written like this in the ‘./serviceWorker’ file.

To enable PWAs and precaching you just need to change the unregister() function to register() as given below.

The register function is written like this in ‘./serviceWorker’ file.

If your service workers are enabled then it will show the message “Worker registration successful” message in the console. The PWA app is set up in react now. It’s time for testing.

6. Check PWA working

As we show working on the audit tab. We enable progressive web app options only. after setting up everything like the above steps. it will show PWAs enable in generated Audit.

Now, you can go to the Network tab in your chrome browser and go online to offline. and refresh the page. you will see that the app is working fine as before. 

The reason for it’s working in offline mode, service-workers pre-cache all key sources and it will load from the stored cache when not found the online source. it will get the update if anything got a change in source in the live mode.

Advantages of PWAs

• PWAs can be cached by the browser and can be used in an offline mode.
• PWAs app is store independent, There is no requirement for play store or iTunes to deploy.
• It can be installed on a user’s home screen.
• PWAs size is smaller than mobile apps.

Disadvantages

• It’s compatible with iOs version 11.3. it’s not compatible with old devices.
• PWAs can’t do everything that mobile apps can do.

Conclusion

In this blog, we have covered every common aspect of Progressive web apps(PWAs). 

Starting from its prerequisites, that install dependencies in the environment. Setup of React app using it’s well-known boilerplate. also saw Use of Audit tab and it’s working. Get deep-dive to service workers. and it’s integration with two different methods. Check the PWAs app’s working. and take a look into advantages and disadvantages.