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.
Table of Contents
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.
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
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.
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.
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.
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.
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.
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.
Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.
Web Services: Definition and its Need in Modern Business OperationsPosted on Jan 13, 2021 | Web Development
Introduction to the MEAN(Mongo, ExpressJS, Angular, Node) StackPosted on Dec 05, 2020 | ACodes series