How To Develop Progressive Web App Using ReactJS?

6 min readMay 6, 2020

How To Develop Progressive Web App Using ReactJS?

What’s a Progressive Web App?

In the dynamic arena of Mobile Application and Web Application, developers attempt to come up with something new and different. Going by the recent trend of creating hybrids for process and performance optimization, PWA (Progressive Web App) stands as the perfect paradigm. To put it in simple terms, it is a cross between mobile applications and web pages of any website.

There was a thin line that separated websites and mobile applications. After the advent of PWA, one can see camouflage in that thin line. To break it down, PWAs are still websites with a URL that functions in a browser, but once you land on the webpage, the functionalities are similar to a mobile application, which gives you a hybrid experience. For Example, Pinterest, Instagram, etc. are instances of PWAs since you can browse them on your laptop, just like you can on your mobile phone.

What features should be in a web application to build a PWA?

If your web app fulfills all the criteria mentioned below, then it is a perfect fit to become PWA.

Speed — Page transition and rendering elements should be smooth for a better user experience.
Responsive to any screen size — Design of the web application should be responsive to fit in all the devices.
Reliable — It must not break in any situation.
Is fully accessible — Take all measures for accessibility.

How do you check if your web app is PWA or not?

First, you will have to open developer tools in Chrome
Then go to the Audits tab, tick Progressive Web App from the categories in the right panel.
Click on the button — Generate Report
If the report shows that all the parameters are satisfied, then your web app is PWA otherwise not.

Perks of having PWA

The number of mobile users has increased in comparison to desktop users in the past few years. PWAs will help attract more users to your web app.
PWAs are much lesser in size than a native mobile app; if your web app is small or mid-scale, then you should prefer building PWA rather than a native mobile app.
PWAs are available offline, which is not the same case with conventional web apps.
PWAs can use web push notification and engage users; it can help in increasing the interactivity.
PWAs are much reliable, it will never show broken links or pages. Moreover, if there is no internet connection, the PWA will still work with offline features. In the worst-case scenario, it will show an offline page informing the user about the bad connection.
PWAs use web workers to perform background activities; they can use the browser’s cache feature to lower down the server request for fetching redundant resources.
Most importantly, it can be installed in the mobile device as an application. Hence, users don’t have to go to a browser every time to open your web app.
PWAs can also use native app-like features to access the camera, GPS, wifi, etc.

Prerequisites for PWA

It must use a secure connection. Your site should be hosted with HTTPS.
The website must be responsive, it must fit across all screen sizes
It must follow all standard accessibility rules.

Developers who are unaware of the PWA or the steps to build it may be under the impression that PWA can be built with only the latest UI frameworks like ReactJs, vue.js, Angular, etc. Well, it’s not necessary to use that framework for building a PWA. It requires only a few necessary components like service worker, manifest file, and https.

Most of the web applications developed earlier are not PWAs. So, here we have given some easy steps to follow and create a PWA using ReactJS.

Steps for Creating PWA using ReactJS

Step 1:

Since we are starting from scratch, the first step is to create a react app. You’ll have to run the below commands in the terminal.

$ npx create-react-app PWA-app
$ cd PWA-app

Step 2:

The manifest.json, in the public folder, has all the metadata that controls how your app looks to the user and defines its appearance at the launch. For Example, Splash Screen like native apps, app icons that are shown on your launcher, theme color, etc.

Some properties need to be filled. Here’s the list,

short_name: It will be your app’s home screen name
name: This name will be used to ask the user Add your_app_name to Home Screen
icons: Various sizes and paths of icons to be used across different types of devices.
start_url: This is the page from where your app will be launched.
display: It specifies how the app’s customized view. If you want to show the app much like the native, the value for this property will be standalone
theme_color: This is the color of the browser’s toolbar when an app is loaded in a browser
background_color: This will be the color of the splash screen when the PWA is installed and launched from the home screen.

Sample manifest.json file:

{
“short_name”: “PWA”,
“name”: “PWA”,
“icons”: [
{
“src”: “favicon.png”,
“sizes”: “64×64 32×32 24×24 16×16”,
“type”: “image/x-icon”
},
{
“src”: “favicon.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “favicon.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
],
“start_url”: “.”,
“display”: “standalone”,
“theme_color”: “#000000”,
“background_color”: “#ffffff”
}

Then the manifest file needs to be included in the index.html file as below.

Step 3:

Service Worker is the most important step in building a PWA. A service worker is nothing but a script that runs in the background and doesn’t need a webpage to perform its actions. Such activities include push notifications, background sync, etc.

The service worker helps our PWA in showing content even if the internet is not working.

The most interesting thing while developing React PWA is that you don’t have to create a service worker. It comes with react initial scaffolding.

Though we need to register the service worker. You will find the serviceWorker.unregister() line at the end of “index.js” file.

Just change unregister() to register() and our work is done. This will automatically register the service worker, we don’t need to do anything else.

Step 4:

The PWA can be tested in localhost, but needs to be hosted on a secure server to act as PWA.

You can check it in local using the below command

Now check your web page in the browser using the Audit tab generate report function. You will find that you have just made a simple PWA in less than an hour.

A drawback I found while creating one PWA is that it depends on the browser’s memory for storing local data. So if you want a large amount of data to be stored in local storage then it will be a little bit difficult due to less amount of storage provided to each application.

The Apple app store has already started to reject apps that act as web pages and don’t have much functionality as compared to most of the native apps, in that case PWAs are suggested by the app store.

Conclusion

Not all web apps need to be developed as PWA. There are cases where this new concept helps businesses in reaching and engaging more users. E.g. It’s helpful for e-commerce web apps, or websites which need apps like view and functionality.

PWAs are fast, reliable, build in less time, acquire less space than the native apps and last but not least it is cost effective too. Thus PWA is the great option for the businesses to reach more users easily by providing them a better user experience.

As a ReactJS development company, we suggest to follow the article and try to create your PWA from your web application. Also we would like to know your feedback or thoughts about the article. So feel free to share it by using the comment section below.

Originally published at https://www.zealousweb.com on May 6, 2020.