My Experience on First Progressive Web Application

After referring to many articles and browsing through videos to learn more and more on Progressive Website Application, here are a few of my observations that might be helpful to you.

Why PWA was the first question in my mind, the reasons quite intrigued me as I observe there are a lot of success factor which would make PWA preferable such as

· PWAs are primarily websites and can be easily accessed on browsers only, thus no installation is required in mobile

· Offline functionality for better User Experience

· Quick loading with less data consumption

· Browser friendly

· Easily accessible as Home Screen button

According to the statistics we observe that most of the e-commerce companies and weather websites are investing more on turning their websites to Progressive web application for better User Experience, few examples on the same would be Flipkart, Alibaba, Forbes, Weather Channels Websites, The Washington Post and Twitter, Lancome, The Home Depot, Virgin America, Fandango to name another few.

The reason behind PWA’s success is because in its power to improve the entire mobile experience for the users. Customers are interested to come back more because they can interact with the brand’s website more easily. There is a trend observed where Consumers are shifting from desktop websites and native apps to Progressive Web Apps.

So What is PWA, according to Wikipedia :

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.

My first PWA was on React where I got to introduced to an extension called Lighthouse which was recently acquired by Google. The beauty of Lighthouse is the report it creates with a detailed analysis of the improvement that can be done on the below fields.

· Performance

· Accessibility

· Best Practices

· SEO

· Progressive Web App

You can see the result for one of my project where we can observe the area to be focussed more to convert any website to PWA

If we observe here carefully, there are a set of rules which need to be followed to convert any web app to Progressive Web App

· The First requirement would be to test the page load ie., the request payload time should be set within the timeout threshold time to pass the requirement.

· The problem occurs when the web app needs to respond when offline, so for it to happen we need to create a simple Html page which should be displayed when offline

· Most of the web apps call the URL to begin with the fetch the data from APIs, this the reason most of the web apps won’t be PWAs as we need to create the service workers which need to be worked offline too.

· The fourth requirement would be to use HTTPs which will be resolved once the web apps are hosted which can be done very easily at Netlify.

This is just the beginning of my course on how my experience was on with PWA, I would be investing more time on writing in details on technicality and code changes to be performed in my continuation of the series.

Please note that the source of the image is google and all the information provided here is my personal opinion.

I hope you have found it interesting and would follow my next article whose link I would be posting here soon.

This is my first article so I would be thrilled on my constructive feedback and any appreciation would be overwhelming

Happy Coding :D

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)