Building a Progressive Web Application (PWA) Using React

Progressive Web Apps or PWA is one hot topic in the web application development world. But what are Progressive Web Apps? Simply, PWAs are mobile applications that run on a browser. PWA runs on any device that has a web browser. They even work when there is no internet. One does not need to download a PWA, just access through the browser. PWA provides native-like experience to the user. They are fast, reliable, and responsive. They can fit on any screen. One of the reasons to choose PWA is its low cost for development. Apart from these, there are many features that make PWA one the best choice in the competition.

PWAs are developed using the same technologies that are used for developing web applications – HTML, CSS, and Javascript. PWA can be developed using UI frameworks such as Angular, React, Vue and others. In this article, we will learn how to build PWA using one of the most popular javascript libraries, React.

PWA using React

Before we start, make sure Node and NPM are installed. We will use google chrome and Visual Studio IDE. Plus, we also need to add the lighthouse extension in chrome. We will use the lighthouse to check if the app is PWA or not.

Add lighthouse

Creating the React App

So let’s get started by creating a React project. Type the following commands to create a React project.

npx create-react-app pwa_react

Running the App

Move to the directory and run the application using the following commands.

cd pwa_react
npm run build
serve -s build

Everything is fine! Our React app is running on localhost:5000.

Using Lighthouse

After installing the lighthouse extension, you will see an icon for the extension on the top-right side of the window. Click and select “Generate report”. Wait for a moment and something like this will appear in the browser.

We can see five different indicators – Performance, Accessibility, Best practices, SEO and Progressive Web App. The last indicators indicate nothing. Click on it.

These details will appear on the screen. Under “Fast and reliable”, check the second and third points.

The second point says “Current page does not respond with a 200 when offline”. And a key feature of PWA is that they load even when offline. This indicates our app is not a PWA. 

Making it PWA

So now it’s time to make it PWA. But how can we do this? The answers lie within the report generated by the lighthouse extension. Under installable, check the second point.

We need to register the serviceWorker. And React has done everything for us. Open the index.js file.

React already provided something about serviceWorker written in the comments.

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

This sums it all. If we want the app to run offline, we need to register serviceWorker. It is very simple. Just change serviceWorker.unregister() to serviceWorker.register(). Yes! this all we need.

Testing Using the Lighthouse

Let’s check using the lighthouse extension. But first, kill the build using control + C and then use the following to run the app again.

npm run build
serve -s build

Generate the report using lighthouse and this time something different appears in the Progressive Web App indicator,

Click on the “Progressive Web App” icon and now we can see, the app is working offline.

Testing Using Google Chrome’s Developer Tools

Let’s have a live demo. Our app is now PWA and it should run offline. Open the developer tool by pressing control + shift + I and then click on the application tag. There we can find “Service Workers”. Click on it. Then check the “offline” option. Now we are offline. Reload the page and see what happens.

There is no error regarding the internet connection. Our app is PWA and it works fine even when offline. 

For further testing, let’s change serviceWorker.register() to serviceWorker.unregister(). Our app is not a PWA again. Kill the build and then type the following commands.

npm run build
serve -s build

Make sure the offline option is checked. Reload the page and see what appears in the browser.

And the “No Internet” message appears on the screen. This happens because we unregistered the serviceWorker, thus making our not a PWA.

Conclusion

Making a PWA using React is not a difficult task. We just need to change register the serviceWorker. Everything else is already handled by React. There are also tools such as the lighthouse, that are useful to test the app. Moreover, chrome always provides impressive tools for testing. We discussed how we can test our app using the chrome developers tool.

Acodez is a leading website design and web development company in India. We offer all kinds of web design and web development services to our clients using the latest technologies. We are also a top digital marketing agency providing SEO, SMM, SEM, Inbound marketing services, etc at affordable prices. For further information, please contact us.