Advantages of Progressive Web Apps and How to build them
Build Progressive Web Apps to improve speed, increase customer retention and increase users.
Subscribe to our awesome Newsletter.
It has been well over a year since PWA (Progressive Web Apps) started making rounds in the World Wide Web. There are more improvements that are coming in PWA’s and Browser Support is also looking good (but, please Safari do something!) - we think that PWA’s are awesome and we all of us are incorporating our products as PWA’s now! We recently converted our product UnderstandBetter as a PWA and saw a lot of improvement in in terms of it’s performance and user engagement. I’ll now explain how we go about making a PWA for a new product or for converting an existing product into a PWA.
As a developer I think that making a PWA is actually very simple, if we follow a few simple steps then we can easily make it - I’ll be listing out some of the main things to be done below,
Make sure you are in HTTPS
It’s way better for security and Service Workers need HTTPS to work - I’ll be explaining about Service Workers in a moment! So, without HTTPS you can’t possibly use PWA.
Adding a Manifest File
Once you are sure about HTTPS you can move on to adding a Manifest File. This Manifest File tells about all the meta information that will be needed for the PWA.
First you have to add the file to all of your HTML with a link tag like this,
This will link you to your manifest.json file which would be as follows,
Everything about this file is clearly explained here. If you’ve completed all these steps you’re already halfway there!
And then come the Service Workers
To use this, you’ll have to install a Service worker file by doing this in all the HTML files,
And in the sw.js file we can do this,
In here we can basically do any of the network related stuff as per our wish, here are some of the best places to get started,
- Service Workers: an Introduction
- Service workers explained
- Caching with service workers, the easy way
- Making a Simple Site Work Offline with ServiceWorker
Annnd we’re offline!
We’ve written another excellent article about all the process of making everything offline. You can find it right here.
Lighthouse to the save
Now, this might be random and out of nowhere but I think that this is the best Chrome extension ever invented by mankind! It analyses your web page and gives a comprehensive result of how it can be improved with analytics and stuff - so be sure to check it out!
Well, for now, I guess that that’s it! To make sure that everything is light years ahead - that’s the most important point when it comes to creating a PWA. So let’s create some awesome Web Apps today!