How to build a progressive web app using React

| June 26, 2020

Introduced by Google in 2015, Progressive Webs Apps, PWAs, are apps that offer a native app-like feel to web applications that are designed to work cross-platform. These offer features like offline capability, local caching of assets, push notifications, and performance benefits.

Technically speaking, a web app must have three main components for us to call it a progressive web app.

The three features that make a web app ‘progressive’

Secure contexts, or HTTPS. Progressive web apps must be served over a secure network, such as that provided when using HTTPS. In addition to security benefits, this helps in establishing your web app as a trusted site, which is a must-have if you are looking to integrate transactions into your PWA. The importance of having secure contexts is amplified by the next feature in our list is only accessible once we have secure contexts, over HTTPS.
Service workers. PWAs must have one or more service workers, which are scripts that allow users to control how web browsers handle network requests and asset caching. Service workers are an integral part of reliable, fast web pages, and offline experiences.
A manifest file. This is a JavaScript Object Notation (JSON) file that controls how your app appears to your end users. All the icons, URL of the app, and other design details necessary to make your PWA appear snazzy are included in the manifest file.

Why go for a PWA?

Due to their perfect mix of features, users often prefer PWAs to regular web apps that require a tad too much contribution from the user.

The offline capabilities and native-like experience are a huge plus for PWAs. Users don’t have to worry about their internet as they can continue to work on their PWA even when offline. As for the native-like experience, users are interacting with a web app, but the look and feel makes them feel almost as if they are using an app that they downloaded on their Android smartphone.
Adding to the native experience on a web app, push notifications help users stay on top of what’s happening and interact with the PWA at the push of a button.
Multiplatform, progressive enhancement – being a web app, your PWA will run on any browser. Therefore, you can appeal to a multitude of users, no matter if they are on Windows or Ubuntu. Even when certain functionalities are not available on some platforms, degradation offers a decent user experience.

How to build a react PWA- the prerequisites

First sure that you have the latest version of Node installed, as well as having a code editor that you feel comfortable with. Visual Studio Code is a popular choice.

If you already have a react web app that you want to lace up with progressive functionalities, great! If not, no worries. The Create React App tool by Facebook will come in handy. You can even import ready-made react apps from GitHub.

Beginning with the basics

To start, we need to install the Create React App tool in our system. Fire up your code editor, and enter the following code snippet-

The installation of the Create React App tool will begin. Once the process is complete, enter the following code to create an empty project.

(code courtesy https://www.zeolearn.com/magazine/build-a-progressive-web-app-using-react)

After you create the project, look in the package.json file, and notice the dependencies that come with the file. Install the React-router dependency as well, using the code editor, and take a test run using the ‘npm run start’ command.

The PWA checklist

To make our job easier, we installed Lighthouse, a free chrome extension by Google which analyzes a web app and shows if it is progressive or not. If the app is not progressive, Lighthouse delivers a list of criteria that your app needs to fulfil in order for it to qualify as a PWA.

Service workers

The Create React App has a default service worker for cache static assets, but we want to create a custom service worker. We begin the process by creating a new service worker file in the source directory of our project, and replace the following code snippet with the name of our custom service worker.

(code courtesy https://blog.bitsrc.io/build-progressive-web-apps-with-react-part-1-63f1fbc564a6)

We add a testing functionality to our created service worker file by using a default console.log(“ “) command, create a new production build of the app, and check the console. Lighthouse will give us an improved PWA score because of our added service worker functionality. You can get creative and write more complex service worker code, depending on what functionality you desire.

Before we add secure contexts, we must enhance the ‘progressiveness’ of our app.

Before the app initializes, we can display loading messages or CSS by editing the index.html file so we are able to remove the import references of CSS files from app.js and index.js files (filenames may vary from system to system) and improve app performance.

Adding secure contexts, and the manifest file

The Create React App tool includes a manifest file in the public directory for use in projects that contain basic configuration options. The public/manifest.json file can be modified to add functionalities like icons, install options, and saving PWA icons on the home screen or desktop for easy access.

Now, it is time to deploy what we have created. Firebase is a preferred tool for many developers to deploy React based apps, and it is what we would recommend for PWA deployment as well. Turn on caching by changing the value of doCache to true, install Firebase and initialize the Firebase module.

Once the process completes, deploy your app by running the following code on the terminal-

The Firebase CLI tool will give you back a URL, which you can open in your web browser. The hosting URL will be an HTTPS URL, which will solve the problem of secure contexts. Example is as shown-

(code courtesy https://www.zeolearn.com/magazine/build-a-progressive-web-app-using-react)

Run the Lighthouse tool one more time, and voila! It should now provide you with a 100 PWA score. Congratulations, you just built your first progressive web app using React!

Improve Your Code with Retrace APM

Stackify's APM tools are used by thousands of .NET, Java, PHP, Node.js, Python, & Ruby developers all over the world.
Explore Retrace's product features to learn more.