A Guide to Build Progressive Web Application with ReactJS

0
60
Build Progressive Web Application

A PWA is a type of a web application that behaves like a hybrid between a web application and a mobile application and can be easily accessed in a mobile device. This type of application model is trying to re-define how mobile applications are made and using a web library such as Reactjs you can build your own. It can communicate with real time APIs on the backend just like a normal mobile application. In this tutorial, we are going to Build Progressive Web Application using Reactjs.

You can also say PWAs are performance focused web applications. They can be saved over a mobile device’s home screen. Their popularity continues to grow since they now support offline and push notifications. Let us scaffold a project using create-react-app boilerplate generator. First, install the package globally on your machine and then create a new project.

npm install --global create-react-app

create-react-app pwa-react-app

Take a look around the project directory structure. If you are familiar with building React applications using this utility, then you will notice that there is no difference or special files that enable a PWA. Here is how the package.json looks like.

You can now try running the application from terminal and see if everything is working. The application will run on http://localhost:3000/.

npm run start

Installing Lighthouse To Build Progressive Web Application

Lighthouse is a free auditing tool from Google that evaluates whether app we are building is a fit to be recognised as a PWA by the mobile device’s browser? It performs this using a pre-defined checklist. Surely, there are some rules to follow to create a PWA. You can add it to your Chrome browser by installing it as an extension. Once installed as an extension we can start the auditing process by clicking on the Lighthouse at the top right corner. Click on the icon and then make sure you are on right tab by checking the URL shown in the lighthouse popup.

insatlling lighthouse

I am not making any changes to the default App.js file for the brevity of this tutorial. If you are interested in expanding this application, feel free to do so. Click on the generate report button. After the process of auditing is complete, a new window will open where Lighthouse has generated an audit report.

progressive web apps

audit report

We can go through it. It analyses PWA rating, the performance of the application, the best practices, etc. It also classifies failed and passed audits separately. To increase the score of our PWA, we need to work on the failed audits.

Registering a Service Worker

A service worker is a proxy server that sits between web applications, browsers, and the network. We use it to make Reactjs applications work offline and in our case, it allows our PWA app to work when the mobile network is off or not available.
A service worker intercepts the network requests and serves the cached files to provide offline support. Let us setup a service worker first. That is the first thing Lighthouse audited. In the public directory of our app structure, create a file service-worker.js.

The next step is to register this service worker by loading the one we just wrote in the above file. Add this before the closing tag in index.html.

register the service
Now let us visit the lighthouse tool and audit our app again. The first failed audit point should be gone by now.

Recognize our PWA

We need to tell the browser in the mobile device to recognise it not as a normal Web Application but as a PWA. Add the following code in of index.html.
<meta name="apple-mobile-web-app-capable" content="yes">

App icon and Home Screen

Facebook’s scaffolding tool create-react-app is so good that it takes care of adding a manifest.json file in the public directory with some basic configuration to add our PWA application to a device’s home screen as an app icon just like any other mobile application.

The short_name is the name of the app that will appear on Home Screen of device. name from above will appear on the splash screen. The icons is important and is the main icon of our app and will appear along the short_name on home screen, just like a native mobile application. For the splash icon to show, add a 512×512 icon.

Next is start_url that notifies that the app was started from Home Screen. We will now solve one of our issue in the previous audit.

failed audit

Deployment

To solve the other issues in our progressive web application, we need a real time deployment server. We are going to use Firebase for deployment since it is easy to connect it with a web/mobile application

First, let us turn the caching on. Go to service-worker.js edit the first line and change the existing boolean value to true.
var doCache = true;
Now, install the firebase-tool we need to deploy our PWA app. We will be installing this dependency as a global module.

npm install -g firebase-tools

# then run the following commands
firebase login
firebase init

Login to your Firebase account or create one you do not have. We need to use CLI tool which prompts with some questions like the below.

Firebase file

On pressing the Enter key for final time and we get a success message and two firebase config files generated in your project directory, .firebaserec and firebase.json. To deploy our app we need to run the following command:
npm run build && firebase deploy

It will prompt back to us with an URL of the application.

Hosting URL:

Visit this URL and run the Lighthouse auditing tool. Firebase uses HTTPs over HTTP and will solve the rest of the issues in the auditing process.

PWA checklist

LEAVE A REPLY

Please enter your comment!
Please enter your name here