Progressive Web App with React! When I read this I thought, why not build one ourselves. If you are familiar with React and a bit about its ecosystem such as Create-React-App utility, this guide is for you.
If you spend at least third quarter of your day on internet then you have seen or read about progressive web apps here and there. No? PWA are performance focused web applications that are especially streamlined for a mobile device. They can be saved over a device’s home screen and tend to consist a native app feel and look. The first PWA app I used on my mobile device is the Lite Twitter one which got released a few months back. Here is the link if you want to try: https://lite.twitter.com/. They even support push notifications and offline support these days.
Let us create a basic React app using Create-React-App generator, the official scaffolding tool to generate Reactjs App released and maintained by Facebook. To install it, we will use our command line tool:
Once the installation process is complete, go to your desired directory and create an empty project. Run this from your command-line interface:
Go ahead and take a look at the directory structure and package.json file. See what dependencies come with this scaffolding tool.
CRA or Create React App is one of the best with minimum hassle tool that I am currently using to build apps and prototypes with React. It is running all that Babel, Webpack stuff behind the scenes. If you want more information or want to customize the process, read here.
I hope, regardless of the timeline, your package.json file looks like this:
We need to one more dependency and that is React-Router: Go Back to your terminal:
You can now try running the application from terminal and see if everything is working:
The boilerplate code will and look like this:
Building the PWA App
Since the sole purpose of this guide is to make you familiar with the build process, I am not going to work out a complex application. For sake of simplicity and your precious time, we will build a simple app. Go to
src/App.js file and make amendments exactly like below:
In above we are including two pages using
react-router-dom.Further we define Home and About Components in
src/components/ directory. It is always a best practice to use this approach and make sure that react components are short and readable.
Now to see if everything working, run
npm start from your terminal window, and you will get a similar result:
If you click on the About button/hyperlink, the
react-router-dom will render the about page without changing the common Header part that is defined in
App.js. This is a bare minimum single page application.
Our main job is still yet to be done. Let’s convert this bare minimum React application to a PWA.
Lighthouse is a free tool from Google that evaluates your app based on their PWA checklist. Add it to your Chrome browser from here. Once installed as an extension we can start the auditiing process by clicking on the Lighthouse at top right corner where other extension might exist in your browser. Click on the icon and then make sure you are on right tab by checking the URL shown in the lighthouse popup. Also, make sure that development server of Create-react-app from terminal is running. Otherwise Lighthouse won’t be able to generate report. The report that is generated by the Lighthouse is based on a checklist that available to view here.
Click on the Generate Report button. After the process is completed, a new window will open where Lighthouse has generated a report. By the looks of it, it does not look pleasing to the Lighthouse and as a Progressive Web App.
We will be solving these issues one by one.
Setting up a Serive Worker
Let’s setup a service worker first. That is the first thing Lighthouse audited. What is a service worker, you ask? Well, it is a proxy server that sit between web applications, browsers and the network. We can use it to make React Apps work offline (remember the earlier point we discussed. Progressive Web Apps are focused on performance). You can definitey read details about it on Google’s Web Fundamental Docs.
It is a two step process. First we will create a
public directory of our app strucutre, create a file
service-worker.js. I am going to use Addy Osmani's service worker configuraiton and I will recommend you to do so, at least for this one. You can find the complete thing in much much detail here. To continue, make sure you add the following code in
Our next step is to register the our service worker by loading the one we just wrote in
service-worker.js. Add this before the closing
</body> tag in
Make sure you restart the dev server by running
npm run start from the terminal. You must see this line if you open Chrome's DevTools > Console:
If we run the Lighthouse audit process again, I hope we will get a better result.
Yes, you can clearly compare the above with our previous audit. It has imporved, and our previous first issue is now coming under Passed Audits. Now let’s move and add some enhancement.
Adding Progressive Enhancement
index.html. To increase performance, I am also adding all our CSS (that is CSS contained inside
index.css) in our
We can now delete
index.css file from out project directory and also remove their import references from
The above process improves the performance of our app by 10 points. The overall PWA score is same though:
Adding it to Device’s Home Screen
The creators of create-react-app is so good to us that they have already included a
manifest.json file in
public directory with some basic configuration. This feature that we are currently adding allows a user to save our PWA site page on their device's home screen. In future, if the user wish to open the app, they can do that just by using PWA as a normal application and it will open in their phone's default browser.
For this purpose, we are going to edit
Let’s talk about this file a bit. The
short_name is the name of app that will appear on Home Screen of device.
name will appear on the splash screen.
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. The size of the icon must be
192x192. I haven't played around with other image formats but you can. Here is the link to a dummy logo for this walkthrough we are working on. Add it to the
public directory. The 512 setting is for splash screen and is a requirement in auditing process. So here is the link to download that.
start_url that notifies that the app was started frome Home Screen. Below it there are three more properties.
display is for the appearance of the app, and I am making
background_color to be same since I want the application to match header background.
We will now solve one of our issue in the previous audit. We are left with only some of them to resolve.
First, let us turn the caching on. In
service-worker.js edit the first line and change the existing boolean value to
I will be using Firebase here for deployment since it is easy to connect it with a web/mobile application for prototyping IMO. First, in Firebase console, create a new project
pwa-example-1. Now, install the firebase-tool we need to deploy our PWA app. We will be installing this dependency as a global module.
Now the CLI tool will prompt for some questions. I am adding a series of images for clarity, make sure you choose the same answers when prompted.
Press the Enter key for final time and you will get a success message and two firebase config files generated in your project directory:
Now, it is time to deploy our app. From terminal run:
The above command tells create-react-app to build our project into the build/ folder, which Firebase CLI tool then deploys. Firebase CLI tool will give you back a URL, save it and open it in Chrome, and then run our Lighthouse audit for the last time. The hosting url will be similar to below:
This solves our main issue from starting regarding using HTTTPS over HTTP. With that, all of our issues our solved and our PWA app gets 100/100 score.
The score looks good to me for our first application. The performance bar above of our application can be improved and there are few ways to that. I will not get into that since the scope of this application is for learning purpose.
You can find the complete code at this Github repository. Go ahead to clone the repo, don’t forget to
npm install once inside the project directory and then head start by trying out aforementioned PWA tips and techniques.