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’
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.
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.
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.
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.
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-
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!