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.
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!)
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.
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
code . # This opens the app in VSCode
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
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
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!!
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!)