Making a website/web app installable using PWA (Part-1 — The Power of PWA)
Hello guys, I’m back with a new series on converting your website/web app to a native application regardless of platform.
I know terms like a web app, and PWA sounds very strange to you. We often use the word “Website”, but what is “web app”?
Generally, we use “Web apps” all day.
Reader: Really!! can you give us an example ?
Sure, why not!
All Google-related services like Gmail, Google Docs, sheets etc., are the best examples of “Web Apps.” that we use daily.
What is PWA?
Progressive Web Application, aka PWA, is a web app intended to work on any platform with the help of a supported browser. It works on both desktop and mobile devices.
It was also called as light-weight native application
Google Chrome, Apple Safari, Firefox for Android, and Microsoft Edge are the supported browsers of PWA (as of now).
Pillars of PWA
PWA was built based on the three main pillars to make it feel like a native application.
- Installable as App — PWA is installable on any device as an application and consumes less space when compared to native apps. In addition, they’re launchable from on the user’s home screen, dock, and taskbar.
- Reliable — It works regardless of the network connection.
- Capable — For example, you can build a video chat app using WebRTC, geolocation, and push notifications and make it available as a native app. Twitter lite uses the concept of PWA.
Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWA
PWAs offer similar capabilities to iOS/Android/desktop apps. They are reliable even in unstable network conditions. They are installable, making it easier for users to find and use them.
Most browsers indicate that PWA is installable when it meets specific criteria with some address bar or banner indicators.
Customer needs
- 50% of smartphone users are more likely to use a company’s mobile site when browsing or shopping because they don’t want to download an app.
- One of the top reasons for uninstalling an app is the limited storage.
- Users hate delays and unreliability on mobile.
- Uninterrupted flow.
How does PWA fulfil customer needs and shape a good experience?
- It uses caching and predictive fetching of resources, making the site perform faster and more reliable.
- PWA usually takes less than 1MB of storage.
- New APIs like web push notifications make it easier to re-engage your users with personalized content.
But why should a user install PWA?
It makes the customer journey easier to come back to your site.
The Android/ios app would at least need three steps.
- Redirects to Playstore or App store.
- Download the app.
- Account sign-in and continuing the process.
But, PWA installation is done with one click, and the customer can continue with his flow.
The PWA badge in Lighthouse shows if your PWA passes the installability criteria.
Great! I hope you got some idea about PWA and its uses.
Reader: How to add the PWA badge to my existing site?
— How to add offline experience to a web app?
— what is a lighthouse report? what can I measure there?
Wait, there is much to know about shaping the user experience for a PWA.
Since I don't want to confuse you through a single post, I divided Making a website/web app installable using PWA into three parts.
Soon I’ll be back with Part -2
Until then, stay Home 🏠 stay safe 😷
Don’t forget to appreciate my work with a 👏.