PROGRESSIVE WEB APP 101

Progressive Web App with ReactJS and Service Workers

A beginner’s guide for creating a progressive web app with react js.

Sharad Ghimire
Sep 13, 2019 · 4 min read
Got that logo of PWA from googling around. Don't know if it is official!

Remember that serviceWorker.js file with 135 lines of code in there; that you always delete after creating a new project from create-react-app? That ugly three lines of comments in the index.js file! I have been there and done that too! 😅

This article is all about registering that unregister() function above. Let’s get started.

What is Progressive Web Apps?

In the lamest term, PWAs are web applications that use some built-in browser features like service workers (which we will talk later) to deliver fast and great user experience. They are the websites that you can install and add to the home screen.

Alex Russell, a developer on the Google Chrome team, describes them as: “These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.”

I got introduced to the concept of the progressive web app when I was assigned to do a project as part of my Software Development Studio at UTS. I had heard about it but never placed my foot in there. So, I grabbed a book from the library called Progressive Web App from Manning Publications. (If you really wanted to learn more about PWA, I suggest you buy this book. I did a lot of research and this book is one of the best!)

Manifest File

First, let's talk about the manifest.json file. PWA reference to this file for getting information related to your applications like app name, icons, the background screen and default orientation. You can also define the custom splash screen, the logo of the app that will be installed in your home screen and all other goodies here.

Service Workers

A service worker is simply a javascript file which works on browser background (in a different thread than that of the main window). With this script, we can simply track our network traffic and make our application run offline by caching all those networks traffic.

Basically, they can tap into network requests, cache parts of our site to provide an offline experience, and provide a better user experience. Moreover, they can even manage Push Notification.

Let's create an app now!

You and I together will create a PWA using the same scaffold create-react-app provides. As you already know how to create and scaffold the project, you may have forgotten those 😂 so here are the commands.

npx create-react-app my-first-pwa
cd my-first-pwa
code . # This opens the app in VSCode
npm start

Let’s audit the current situation of our application. Open the DevTools in Chrome and navigate to the Audit section and Click the ‘Run Audit’ button.

As you can see (hope you can see above without zooming 😁!), Under Installable there is a red flag for registration of the service worker because we have not done anything yet.

According to the official documentation of PWA, we need to complete certain requirements to make our app progressive. But, React already did all those things for all and the only thing we have to do is invoke register() function in the src/index.js file that we talked about earlier. If you want to learn more about it, Google’s documentation about PWA is the perfect spot.

For changing our app icon, name and all those good stuff, navigate to public/manifest.json file.

All those name and values are self-descriptive and you can change what you desire here. However, this manifest file generator website is one of the best I have encountered so far. One good thing about this website is you upload your icon and it will take care of resizing its dimension into multiple formats.

Moreover, we need to add this manifest file to the root directory and also to index.html (which react already took care of!!)

But, here is one important thing you need to understand about PWA, to make it work we should serve the files using HTTPS. For that, we need to production build our application and serve using some third party software like http-server or serve.

npm i serve -g
npm run build && serve -s build

Now, if you start this application and run Audit after that, you will see service worker working and manifest file loaded. You can also run your app on your phone and see that “Add to home screen” pop up!!

Conclusion

This is just a step by step explanations of how to start and hook up PWA with react app. It did not deep dive into how to fetch data from network and cache and how to make it work offline. More on this later.

Thanks and have a good day (or night!)

The Startup

Get smarter at building your thing. Join The Startup’s +800K followers.

Sharad Ghimire

Written by

A software engineer with love for open source. Find me at srdstacks.now.sh

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +800K followers.

Sharad Ghimire

Written by

A software engineer with love for open source. Find me at srdstacks.now.sh

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +800K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store