Progressive Enhancement to PWAs

What is all this rage about PWAs?

3 words — Capable, reliable, and installable. PWAs are web apps that are based on these three pillars or in other words, these three things make an otherwise normal web app be categorized as Progressive Web App.

Let’s look at these three in reverse order:

Installability

A PWA is installable on the user’s device (based on some install criteria), thus providing a better user experience. For example, they appear on OS launch surfaces, run in their own application window (instead of a browser tab), show up in activity switchers and device search engines, and many more.

How to make a web app installable is beyond the scope of this article, but to get started, web app manifests do the magic.

Reliability

A reliable Progressive Web App doesn’t feel useless without a network but the usual web apps do. Like native device apps, a PWA is designed to start up, be usable and interact with content (usually from caches) even with a slow or dead network connection. In short, users never get nothing. PWAs are also expected to be faster as compared to usual web apps for a better user experience.

Think of accessing the YouTube app without network availability. Users don’t get nothing. There is a user-friendly ‘No connection’ message, but the app itself is still usable, especially if the user has downloaded videos. And as soon as the network becomes available, the app informs ‘Back online’ and starts syncing the data. The behavior, although not the best, is still much better than a web app that does nothing without a network connection.

Service workers, web app manifests, and many other solutions for web storage and caching help make the PWA feel more reliable.

Capability

This is where the word ‘Progressive’ plays the most important role.

To understand this, there is a need to understand the difference between a web app and a native device app, especially in terms of capabilities and reach. A web app has undoubtedly far better reach than a platform-specific app but the native apps outdo web apps in terms of capabilities. As illustrated by web.dev, PWAs intend to have the best of both worlds. PWAs should still have the reach of web apps and the capabilities of a native device app (as much as possible), by progressively enhancing the capabilities of the app.

Using web app manifests and service workers is the first step to enable a web app to start behaving like a native app. To bridge the gap further, progressive enhancement comes into play. Progressive enhancement is about using modern web capabilities to add platform-specific features to web apps. For example, sharing mechanisms of the device, accessing file systems, push notifications, etc. These capabilities are made possible by making use of the open Web APIs, which are being actively developed and integrated by more and more browsers. Can I Use is by far the best and the most reliable source to track the status of these APIs per browser version.

• Consider Twitter Lite as an example which is the PWA version of Twitter and came to life in 2017. It is more reliable on slow connections, uses less data on the network, loads faster, and uses less space on the device. The app uses multiple Web APIs to incrementally improve performance and user experience. Some of these are Push API, Indexed DB, Service Workers, Idle Deadlines, and possibly many more.
• Goibibo, India’s leading online travel booking portal is no stranger to a Progressive Web App either. They also observed a tangible 60% increase in conversions with PWA. They used Contact Picker API to enable PWA users to fill in details of their family and friends and Web Share API to enable sharing hotel details and train availabilities. Web OTP API helped them secure authentications and Push API to deliver asynchronous notifications.
• Tinder Online also uses Service Workers, Push Notifications, requestIdleCallbacks, and many other JS performance optimization APIs to progressively enhance their PWA.

Statistics show that many organizations have better customer retention, page visits, and user engagements with PWAs. In conclusion, PWAs are indeed just websites, but with progressive enhancements, they are less website-like and more app-like.

Does your heartbeat for developing exciting SaaS products? We are always looking for motivated new team members. Take a look at our vacancies: https://eqs-group.personio.de/recruiting/positions