Progressive Web Apps (PWAs): Everything you need to know about

Spoiler Alert: The post discusses the kind of amazing products you can build as progressive web applications. We will uncover myths about PWAs, discuss benefits, when to go the PWA way, showcase cool PWA examples & much more.

Topics we will cover in this post -

• What are PWAs & Why they are becoming popular
• Features and Benefits of using PWAs
• Tech Stack for PWAs
• Common myths busted
• When to use PWAs
• Case studies and examples of apps you can build as PWAs (domain wise)
• Impact of PWA on business
• Drawbacks of using progressive web applications
• Conclusion
• FAQs

The world has come a long way since Steve Jobs launched the iconic iPhone in June 2007. It fundamentally altered the way we communicate. Hundreds of Thousands mobile devices are getting activated daily. Infact, such has been the steep rise in the usage of mobile devices that more than 50% of a website/product’s audience comes from mobile phones and tablets.

According to Statista,

It is not uncommon to see a product company offering a web-version of their product and native mobile apps for Android and iOS. Plus, not to mention the mobile website. Developers need to work across platforms to ensure that a website/product/app delivers not only a consistent but a great user experience.

With the rising expectations of users, delivering the best experience across platforms is quite a challenge. On top of it, when a user makes the switch between desktop or mobile version, he/she expects to make the transition seamlessly. Another challenge is that to deliver this great experience, it takes a hell lot of money and time. And despite spending a truck load of money on design & development, if the experience still does not meet the expectation, there’s endless frustration for product owner and users too.

So, what do you do?

There must be a way in which the experience on an organization’s website is similar to the native experience on mobile platforms.

Yes, there is — Progressive Web Applications.

PWAs are not a new concept. These have been around since 2015. You can think of these in terms of modern web applications. Combine the features of native mobile apps with the amazing capabilities of web and you get a progressive web application.

Adriana Jara, from WomenTechmakers & a Developer Advocate, explains very nicely what a PWA is in this video. You get the best of both worlds (web + native app) with a Progressive Web App. Watch it here -

Source

Tal Ater, Founder of Delicious Experiences has the most brilliant way of summing up a progressive web app in his book. Here is an excerpt -

Progressive web apps start off as simple websites, but as the user engages with them, they progressively acquire new powers. They transform from a website into something much more like a traditional, native app.

Imagine waking up in the morning, grabbing your phone, and visiting the website of your local train company. You quickly check the schedule of the train that will get you to work, close your browser, and put the phone back in your pocket. At the end of that day, you visit the site again and check when the next train departs (not even noticing that the elevator you are riding has no cell reception because the train company’s site now works even when you are offline).

The next day when you visit the website again, your browser asks you if you would like to add a shortcut to it on your home screen, and you happily agree. Later that day when you launch the site from an icon on your home screen, it lets you know that due to some construction work, delays may be possible and asks you if you would like to receive notifications about future changes to your commute.

The next morning, as you are waking up, you receive a notification on your phone that your train has a 15-minute delay. You hit the snooze button on your alarm and gain a few more precious moments of sleep.

What started as a simple website has slowly acquired new powers until it was just as capable as any native app on your phone. Instead of trying to send you to the app store, hoping you will install their app, the train company has earned a permanent place on your phone — one step at a time.

This new progressive model replaces the binary installed/not installed nature of native apps. Progressive web apps build trust with their users and acquire new powers as they are needed.

What’s so cool about Progressive Web Applications?

Take a look at some of the most prominent features & benefits offered by PWAs.

Offline Compatibility — One of the biggest features offered by a PWA is that it can function when users are offline or face poor connectivity issues. This ensures a better user engagement. How? Well, when a user is able to use an app offline, he/she can continue browsing or doing their tasks without interruptions. This reduces abandonment rates considerably. You can actually control what to show users when they are offline.

Responsiveness — A PWA can work on any device — mobile, tablet or desktop. Consistency leads to frictionless user experience.

Blazingly Fast — PWAs offer a faster loading time. And, speed is a critical factor whether we talk about UX or SEO. Moreover, in cases of poor connectivity, users can continue using the app without any hiccups. This creates a delightful experience for them.

No App-Store Installations — Users don’t have to go to app marketplaces to download the app. Simply visit the website and add it to your home screen and you are done!

Progressive in nature — Like explained earlier in the example above, PWAs offer more functionality gradually. This depends on the capabilities of your device.

Easy Updates & 100% Secure — Automatic updates mean users don’t have to go through the long, arduous process of upgrades. Also, because of the use of HTTPS, malicious people won’t be able to access content or make unauthorized changes. Data is delivered via secure channels.

Discoverability — One can discover progressive web applications, both, on the web and app stores.

Easy analytics integration — PWAs can be integrated with tools like Google Analytics to understand site and user behaviour. Tracking events will allow you to know the browsing behaviour, installations etc.

Push Notifications — Native app-like notifications can be sent to users even when they are not using the browser. So, for instance, an e-commerce company can send notifications about items in the shopping cart to boost check-out, send discount offers and much more.

Payment Processing — Because of the APIs in the open web payments standards, you can integrate payments of your choice allowing wider choice to customers. Another benefit is that you can do away with the exorbitant 30% commission that you need to give to Google and Apple. (Note: Google decided to reduce the commission from 30% to 15% in March 2021, with $1 million as the threshold. Once you cross that, 30% kicks in). Have your own billing system on the website and no more commission!

Size — PWAs are generally less than 1 MB which is way lower than what you would find on the app stores. For instance, Twitter Lite users benefit from data consumption savings; the PWA is only 600KB over the wire vs. 23.5MB of downloaded data needed to install the native Android app.

Tech Stack for Progressive Web Applications

Debunking the common myths about PWAs

Myth #1 — PWAs need to be created from scratch

Fact — Existing websites can be transformed into PWA depending on the evolving needs of any business. How? Add Service Worker (a JavaScript file that makes sure your website works autonomously) & a manifest.json file to your website. This will function like a proxy server between the web and a browser. It will intercept network queries and handle user responses. Despite your users being offline, it will send queries to the website which reacts using cached responses.

Because of the manifest.json file, a starting URL, app icons, and screen orientation are recorded. All this will convert your website into a PWA.

Myth #2 — PWAs will drain your pocket

Fact — No PWAs do not mean sky-rocketing web development costs. In fact, PWAs are relatively cheaper to build than native apps.

Myth #3 — PWAs are only for small businesses

Fact — Biggies like Twitter, Google, Starbucks, AliExpress and similar other brands use PWAs to power their businesses.

Myth #4 — PWAs can’t be launched on app stores

Fact — PWAs can be accessed, both, via the web and app stores. Twitter’s PWA is available on the Google Play Store as much as it is available on the web.

Myth #5 — Since PWAs are not native apps, these don’t have access to hardware features

Fact — PWAs can very well access hardware features. Check out in detail here —

Myth #6 — PWAs are only for mobile

Fact — PWA can run on any device that can offer you a supporting browser.

Myth #7 — PWAs can be only be built for specific businesses.

Fact — Discussed later on in this post, PWAs are widely used across industries from gaming, ecommerce, music etc.

Myth #8 — App users tend to remain more loyal and offer higher LTV

Fact — According to this awwwards book, PWAs generally weigh less than 1 MB, which is far less than the average size of a native application. And building with the web makes it easier to support the long tail of different screen sizes and device capabilities.

These features are particularly important for businesses with growth ambitions in emerging markets, where data plans are expensive, storage space is limited and devices can be low powered.

In developed markets, there is a wide range of devices and more people on high end flagship phones. However, storage space still matters: the more we have, the more we use. In these markets, a PWA can be a complement to a native app, in particular for users that have churned from a native app to free up storage.

Read about more myths here in this amazing article by David Rousset

When should you use Progressive Web Applications?

• If your business does not have a native app or offers a poor/outdated experience, start exploring the PWA route. Also, if your native application relies too much on web content, PWA could be a way out. As a web-heavy business, having a PWA will allow you to expand your user base via app store and be very cost — effective too. On the contrary, a PWA might not be the right choice for you if functionality not available on the web is required.
• If you have an existing native user base and the application is too heavy that a significant portion of your audience is not installing it, go for the ‘Lite’ version using PWA. However, there will be a drawback to this scenario. When it comes to analytics, you will have to carefully segment between the ‘heavy’ version and the ‘lite’ version of the app.
• As a company, if you have value added services to offer, consider have a PWA and native app for different tasks. For instance, as a retailer you might want to give the main shop experience as a PWA, and a separate magazine/lifestyle native app. Or, an insurance company might offer the main information and lead generation as a PWA, and a separate chatbot/assistive experience/customer service native app.

Examples of PWAs across domains & business impact

1. Starbucks

The multinational chain of coffeehouses, implemented a PWA back in 2018. The app helped increase the daily active users by almost 200%. Also, the orders on desktop were nearly the same as mobile.

2. George.com

A leading UK clothing brand, part of ASDA Walmart saw a 31 percent increase in mobile conversion. Here are some other statistics with respect to the benefits of PWAs —

3. Treebo

A budget hotel chain in India that decided to check if PWA would actually impact their business. And, here is their graph -

As soon as the page speed performance improved post PWA launch, their overall SEO metrics started showing a marked improvement. The CTRs went up, average ranks improved and as a result, the overall organic traffic and conversion rate from organic sources went up considerably. (Source: Treebo Blog)

4. MakeMyTrip

One of India’s leading travel company tripled its conversion rate using PWA. Also, their page-load speed improved by 38%. With more than 23 million downloads, MakeMyTrip’s native app is indispensable, driving half of all their bookings.

But in a market of over a billion people, many potential users only have intermittent connectivity and visit the site from low-end phones with data limitations. These two factors make it difficult to drive users to download a native app, leading to steep drop-off rates and high customer acquisition costs. PWA helped with -

• 3X improvement in conversion rate
• 38% improvement in page load times
• 160% increase in shopper sessions

(Source: developers.google.com)

5. Ola

Tier 2 and Tier 3 cities (cities with populations of 20,000 to 99,000) pose unique challenges and opportunities for Ola. Demand for sustainable, reliable transport services is growing rapidly and is eagerly anticipated in these areas. People in these cities often deal with intermittent cellular connectivity and have low-end smartphones with low memory and slow processors. These users are less apt to download and store native apps on their smartphones because native apps require high data usage and take up a lot of space — the Ola Android app is a 60MB download and the iOS app is 100M. It was clear that Ola needed a different way to reach these users.

PWA solved the problem.

Ola built their mobile website as a Progressive Web App (PWA). Using just 200KB of data to install, the PWA is at least 300X smaller than downloading the Android app and 500X smaller than downloading their iOS app. Repeat visits use as little as 10KB. This low data consumption translates into a 3.4-second first visit and less than a second for repeat visits on 2G and 3G networks — an ideal solution for millions of Indians.

Ola also noticed that 20% of users who book using their PWA had previously uninstalled their app. By reducing the amount of storage space needed, the PWA allowed them to effectively re-engage with their previous app users.

6. Nikkei

Nikkei saw a rapid rise in mobile traffic to their legacy website as smartphones became the main point of entry to the web for many users. However, using Lighthouse, an auditing tool that scans a web page and gives recommendations on how to improve across multiple categories, they understood that their site wasn’t fully optimised for mobile across multiple areas and was very slow to load.

A Progressive web app helped improved speed and interactivity, thus, offering a superior performance.

More such case studies at — https://developers.google.com/web/showcase​

Drawbacks of using Progressive Web Applications

In my product development experience of over half-a-decade, I see the following limitations with PWAs -

• Building PWAs is definitely a growing trend. However, iOS still does not support web push notifications. PWAs are cornerstone for future app development (especially in an enterprise environment). Not having this functionality definitely hurts app developers. Push notifications are very much core of a PWA. Plus, this is required to replace native or hybrid app development.
• At present, there is no way to show some native popup for “Add to Home Screen” just like on Android, and you have to show some tool tips with an instruction on how to get the PWA. We are hoping that Apple will tackle this in the near future. Fingers crossed!
• PWAs consume a lot of battery. A lot of complex code goes into building a PWA. Hence, these applications drain the battery very quickly compared to native apps.
• Not a major drawback but developers need to ensure that a PWA works seamlessly across different browsers. If its not optimized for a particular browser, let’s say Safari, you could be losing out on a portion of your target audience.

Wrapping Up

PWAs can be the next game-changer for your business. In case you are facing issues with your native applications and want to deliver a consistent experience and performance to your users, PWAs might be the answer to your problems.