Progressive Web Applications (PWAs) are a hybrid between a standard webpage and a mobile app. They allow users to access the PWA from their computers, but they offer the sleek, fluid design of a mobile application.
As PWAs become more popular, the desire to build them has increased, as well. If you’re wondering how to build a progressive web app using React.js, you’re not alone. The basic steps to building a PWA in React.js are as follows.
Setting up
Before you begin setting up your PWA, you’ll want to decide on a server in which to build. Once you know where you want the PWA to be, generate a basic React application using create-react-app.
When you’re ready, switch to the server you want to build in and run the following.
npm install -g create-react-app
create-react-app pwa-experiment
After that, you’ll need to install something called React Router.
cd pwa-experiment
npm install --save react-router@3.0.5
Now you need to run the standard gist in your App.js. You can easily find the gist by searching “PWA in React.js gist” or something similar. After you run the standard gist, you’ll have created a basic layout with a few navigation options.
If this is sounding foreign to you already, you might want to consider React 16 training before going further as it may help you fully understand the process and can better ensure success.
Lighthouse
Lighthouse is a free tool that Google has created for developers who are building PWAs. Google has a PWA checklist against which it tests your PWA (using Lighthouse) for quality and completeness.
It’s a simple Chrome extension that you can get from the Google Developers suite. Just search Lighthouse and you’ll find it. Once it’s installed, click Generate Report and you’ll get a comprehensive report on how your PWA is doing.
Service worker setup
Next, you need to set up a service worker. It’s basically a small piece of JavaScript that exists between the network and your application. When put into action, it will receive any network requests and deliver cached files.
Basically, it’s what enables your PWA to work offline. The process is a bit lengthy and complex, but you can find all the code you need online. If you’re not good with code or you’re just starting out, you might seek training instead.
Run Lighthouse after each step to see how you’re doing.
Progressive Enhancement
Progressive enhancement doesn’t just mean to start making things better bit by bit, although you want to do that, as well. Progressive enhancement is a term that basically means your app will be able to function without having to load JavaScript.
Once you’ve added progressive enhancement, check your app with Lighthouse again. If your score is higher, you’ve done it correctly.
Adding home screen capabilities
One of the main “selling points” of a PWA is the ability to save it to your home screen and run it just like an app. To do that, you have to add home screen capabilities to your code.
Doing this requires you to install a manifest.json file to the public directory on your server. You can find the lengthy code for this online. You’ll also need an icon.png to use.
Once you’ve done all that, you’ll add a couple more lines of code to the PWA and run Lighthouse once more. Your score should be significantly higher at this point.
Deploy
At this point, the only things you should be missing are caching and https, both of which can be taken care of during deployment. To deploy your PWA, you’ll probably want to use Firebase.
You’ll want to run a new pwa-experiment in the Firebase console and run the following code in your project folder.
npm install -g firebase-tools
firebase login
firebase init
Once you complete the rest of the deployment process, you’ll have a PWA. Sort of. At the very least, Lighthouse should rank you at 100 percent. But many enhancements and design elements will be missing, even if you follow basic tutorials.
The beauty of PWAs is that you can make them whatever you want them to be. Whether your PWA is educational or for entertainment purposes, being able to create it in such a way that it can operate with the unique functional capabilities of a PWA can only enhance the end project.
If you’re still confused as to how to build a progressive web app using React.js, you can obtain training from a variety of services to get a better handle on the process and develop more dynamic and impactful PWAs for your audience.
