top

Build a Progressive Web App using React

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. Getting Started 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. For Home.js: And for About.js: 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. Installing Lighthouse 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 aservice-worker.js file (service worker, after all is JavaScript code) and then register that worker in our index.html. In the 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 service-worker.js file: 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 index.html. 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 Progessive Enhancement is way to improve the app/site since it will work without any JavaScript loading. Now, we want to display a loading message and some CSS or none (your choice) before the React app initializes the DOM. Let’s add a the required CSS and a loading message to our index.html. To increase performance, I am also adding all our CSS (that is CSS contained inside App.css and index.css) in our index.html file. We can now delete App.css and index.css file from out project directory and also remove their import references from App.js and index.js. 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 public/manifest.json: 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. Next is 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 theme_color and 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. Deployment First, let us turn the caching on. In service-worker.js edit the first line and change the existing boolean value to true. 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: .firebaserec and firebase.json. 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. Say
Rated 4.0/5 based on 20 customer reviews
Normal Mode Dark Mode

Build a Progressive Web App using React

Aman Mittal
Blog
28th Dec, 2017
Build a Progressive Web App using React

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.

Getting Started

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:

Progressive Web App

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.

For Home.js:

And for About.js:

Now to see if everything working, run npm start from your terminal window, and you will get a similar result:

Building the PWA App

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.

Installing Lighthouse

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.

Installing Lighthouse

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.

progressive web app

 

audit

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 aservice-worker.js file (service worker, after all is JavaScript code) and then register that worker in our index.html.

In the 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 service-worker.js file:

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 index.html.

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

Progessive Enhancement is way to improve the app/site since it will work without any JavaScript loading. Now, we want to display a loading message and some CSS or none (your choice) before the React app initializes the DOM. Let’s add a the required CSS and a loading message to our index.html. To increase performance, I am also adding all our CSS (that is CSS contained inside App.css and index.css) in our index.html file.

We can now delete App.css and index.css file from out project directory and also remove their import references from App.js and index.js.

The above process improves the performance of our app by 10 points. The overall PWA score is same though:

Adding Progressive Enhancement

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 public/manifest.json:

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.

Next is 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 theme_color and 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.

Deployment

First, let us turn the caching on. In service-worker.js edit the first line and change the existing boolean value to true.

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.

Deployment

Press the Enter key for final time and you will get a success message and two firebase config files generated in your project directory: .firebaserec and firebase.json.

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.

Say

Aman

Aman Mittal

Blog Author

Aman Mittal is a Full Stack JavaScript developer specialising in Node.js. Currently he is fascinated by the aspect of React and React Native. When he is not writing JavaScript he is a bibliophile. Website:http://www.amanhimself.me/

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs