Why Progressive Web Apps Are The Future of Mobile Web

This research was conducted by YML, a digital product and design agency headquartered in Silicon Valley.

00. Progressive Web Apps: They Simply Work Much Better Than Your Typical Mobile Website.

When Pinterest replaced their mobile website with a progressive web app (PWA) they immediately saw tremendous lift across several important metrics:

Source: A Pinterest Progressive Web App Performance Case Study

PWAs just work better than your typical mobile site. Period.

There is no shortage of success stories from nearly every industry vertical highlighting significant improvement in a wide variety of KPIs after PWA implementation:

• West Elm’s PWA implementation earned a 15% increase in time spent and a 9% lift in revenue.
• Flipkart, India’s largest e-commerce site, tripled time spent on the site and drove 40% higher reengagement.
• AliExpress, part of the massive Chinese platform Alibaba, saw conversion rates for new users increase by 104%.

But given the continued momentum and increased support from both Android and iOS, brands have been slow to take advantage of the benefits.

We understand there may be some confusion as to what PWA’s ultimately make possible, which we hope to clear up here. Additionally, we hope to alleviate the fatigue associated with the time and investment needed to get your mobile ecosystem to where it is today.

01. Why Progressive Web Apps are Websites That Took All The Right Vitamins

Progressive Web Apps have been part of the conversation for a number of years, but have yet to be meaningfully adopted by most brands, which strikes us as a missed opportunity given the many benefits they possess.

In fact, PWA’s can bring native app-like experiences and functionality to the mobile web, and they can be an extremely efficient way to deliver your digital experiences.

But as with many new technologies, the devil is in the details:

• How “app-like” are we talking about?
• Exactly what features and functionality are possible?
• Are they fully cross-platform?
• Should I replace my native app with a PWA?

These and many more questions are common as business and technology leaders consider the implications on their mobile user engagement strategies.

This paper will explore PWA in more detail, establish a clear definition, review the arguments for and against, and provide some high-level guidance for where the set of technologies should fit into an ecosystem of customer touch points.

Let’s Define PWAs in a Sentence

It’s hard to find a very detailed, comprehensive and universally agreed-upon definition of PWA, but two quotes from Alex Russell (who, together with Frances Berriman, coined the term progressive web apps) gives us a good starting point.

The flippant definition:

“Progressive Web Apps are just websites that took all the right vitamins.”

The more precise explanation:

To get even more specific, PWAs can offer certain functionality that is typically associated with native applications. For example:

• Near instantaneous loading (on the second visit)
• Installed on the home screen as an app icon
• Remove browser “chrome” / navigation creating a full-screen experience
• Offline access
• Push notifications

YML’s point of view frames PWAs as having such tangible potential for business impact that they function as a set of best practices for making websites operate more like native applications.

02. Let’s Compare: Progressive Web Apps VS Native Apps VS Mobile Websites

PWAs vs. Native Apps: The Wrong Comparison

Maybe simply because the “A” in PWA stands for “app,” too much discussion around PWAs focuses on comparing and contrasting to native mobile applications. We believe this comparison (and the accompanying discussion) is misguided.

PWA’s are absolutely not a universal replacement for native apps.

The only experiences we believe in are the compelling customer experiences that bring people back time after time. And if your native app experience meets this bar then it should most certainly continue to exist.

These experiences tend to have some common characteristics:

• They address high frequency use cases such as financial services;
• They are leveraging low level hardware integrations or operating system features not supported by the web and/or are focused on doing so in the future;
• There is a need (or perceived benefit) for heightened security

If your existing native app experience doesn’t check at least one of these boxes above then we recommend reconsidering whether or not it should continue to exist.

You can read our Hybrid vs Native article here

If it doesn’t have the frequency of use, or doesn’t require low level access to device hardware not available to browsers, then what value do they have?

These apps — let’s call them vanity apps — are the most likely candidates to be replaced by PWAs over time.

PWA vs. Mobile Web: The Right Conversation You Should Have

We recommend the conversation concentrate on how PWAs are a huge upgrade to responsive mobile web.

As shared earlier, there is no shortage of published case studies from nearly every industry vertical highlighting significant improvement across a wide variety of KPIs after PWA implementation.

What are the underlying factors driving these performance improvements?

Google uses a helpful acronym for us to understand why PWAs are so effective: FIRE — Fast, Integrated, Reliable, and Engaging.

FAST

By enabling background processing, which accelerates page load time tremendously, PWA’s deliver a much faster experience.

We all know that speed is important:

On a mobile device, even a 1 second delay can increase bounce rate by almost 50% and decrease conversion by 20%.

Walmart famously found that for every 100 milliseconds of improvement to page load time, there was up to a 1% increase in incremental revenue. Tinder cut its load time from roughly 12 seconds down to five seconds using a PWA.

INTEGRATED

Using an ever-evolving set of web capabilities, PWAs integrate more tightly with native hardware than regular web sites. They ultimately feel more like a native app from a user experience perspective — seamless and integrated.

RELIABLE

Caching isn’t just about speed; it’s about providing access either offline or in limited network and connection environments.

ENGAGING

Speed and reliability drive increased user engagement. And, as noted previously, PWA’s also facilitate sending push notifications, helping to drive ongoing engagement with the experience.

Lancome saw a 12 % increase in conversion rates on recovered carts via Push Notifications.

Additional case studies can be found in Google’s Developer Portal and at PWAstats.com.

Another key benefit to PWA is its discoverability. It exists on the web, just like any other website, and can be found via major search engines, social shares, and links from other websites.

The fact that it removes the barrier of having to go to one of the native app stores to find, authenticate and install the application prior to using it means it’s ultimately easier to integrate it as part of your content, paid and social strategies.

That’s tangible value for any brand.

03. The Key Components of PWAs

So what makes PWAs so special? There are four important pieces:

1: SERVICE WORKER

This is probably the most important component, and is the key to forcing a website to feel more like an app: Service Worker enables websites to download and cache certain files or content locally on the device.

When a user accesses a PWA the first time, the service worker immediately jumps into action, downloading not only the first view, but other content in the background. With that content already cached on the device, the site appears to load much faster.

Source: Introduction to Service Worker, Google

Think about when you install a native application:

Lots of the content and supporting files get downloaded and installed locally, enabling the thing to launch and load quickly. This same idea is also key to enabling the user to access content when offline (or in an area of limited connectivity).

Service workers are also the piece that enables websites to send push notifications.

2: HTTPS

Service workers require that a website is delivered over a secure connection. This shouldn’t be a big deal given Google’s broader focus on wanting everything to be delivered over HTTPS.

3: WEB MANIFEST

A JSON file that provides basic meta information about the app, such as app icon, background color, name, etc.

4: ICON

The image a user will see once they install the app on their home screen.

PWAs Limits

While there have been continued momentum and increasing support from both Android and iOS, there are inconsistencies and limitations across browsers and platforms that exist today to take into consideration.

iOS main limitations

For example, currently on iOS, a PWA can only store up to 50 mb of data for offline access. And, if the user doesn’t launch the app for a few weeks, the cached files will be deleted, requiring a full download on next launch.

As mentioned above, access to certain hardware features like Bluetooth, Touch and Face ID are not available or limited. An additional consideration is that the performance benefits aren’t evident to a user until their second visit.

No Siri Integration. Even if you have a PWA installed with an icon and the name Tinder, Siri can’t find it.
Source: Progressive Web Apps on iOS are here, by Maximiliano Firtman.

Much of the speed benefit comes from the ability to download content in the background, meaning that the first time a user visits a PWA, they still have to load the initial content. This can be mitigated by following best practices to keep total file size low, and/or by using Accelerated Mobile Pages (AMP) for even faster initial load.

AMP + PWA can be a powerful combination.

Source: Enabling iOS Splash Screens, by Evan Bacon.

Further, while Android allows the web site to send the user a prompt to install the app on their home screen, no such ability currently exists on iOS.

Instead, the user must manually open the system share functionality and find the “add to home screen” button.

Again, there has been tremendous momentum and increasing support from both Android and iOS which we at YML are confident that in the months and years ahead we will see more consistency and reduce limitations in the experiences PWA’s can bring to life.

04. Progressive Web Apps In Real Life

The Weather Company

Rather than rebuilding their entire web site as a PWA, they started with a single feature: Push Notifications.

It was rolled out globally in more than 60 languages and earned more than 1 million opt-ins in the first three months.

It allows the company to test and learn their way to potential larger deployments in the future.

George.com

George.com, a british clothing brand in the Walmart family, implemented a PWA and saw nearly a 4x reduction in page load time and a 31% improvement in conversion rate.

Twitter Lite

Twitter lite is tiny, wicked fast, and still maintains most of the functionality of the native app — including that fun little animation that happens when you pull down to refresh the feed.

Starbucks

Starbucks used PWA to replicate most of the functionality of its native application.

It’s fast, allows you to order and pay via mobile, and when you add an item to your order, there’s a cute animation that shows the item in your bag.

More Examples

• Expedia used PWA to accelerate their hotel search results pages by 2–3x.
• QR Code Scanner is cool simply because it demonstrates that web apps CAN access device camera.
• Other potential examples here and here. Note that Appscope, that second link, includes lighthouse scores for apps in the catalog.
• Moovweb has also aggregated a list of ecommerce sites using PWA and other modern web technologies.

05. Progressive Web Apps Resources

We compiled this list of 10 resources for readers eager to learn more about PWAs.

• Google’s Official Developer Section on PWAs: a fantastic, comprehensive resource for PWAs including videos, how-to-guides and testing tools.
• Google’s PWA “Roadshow”: this is the first in a series of great videos from Google Chrome Developers. The entire series provides a solid overview, some successful examples, and some developer how-tos.
• Mozilla’s PWA guidelines: an excellent collection of resources for developers exploring the potential of PWA.
• Jason Grigsby’s Progressive Web Apps book: answers the what, why, and how of progressive web apps, from making the case in your organization to reaching your users in bold, new ways. A List Apart has an excerpt from Chapter 2 that is a great overview of PWA. Jason also wrote an excellent post on why iOS’s lack of full support for PWAs shouldn’t matter. It’s a couple of years old at this point, and iOS has begun supporting more PWA functionality, but the arguments are still relevant.
• Maximiliano Firtman: has a great post on PWA enhancements added in iOS 11.3, which — when combined with Jason Grigsby’s arguments — continue to make a strong case.
• PWA Stats: A community-driven list of stats and news related to Progressive Web Apps
• Can I Use?: provides developers with very specific features/functionalities supported by different versions of mobile browsers.
• What Web Can Do Today?: a companion resource to ‘Can I Use’ that showcases web-based capabilities of your current browser.
• Yes, That Web Project Should Be a PWA: a guidebook for business leaders, product managers and technical decision makers.
• Additional PWA resources: A helpful collection of links categorized by features that digs into the weeds of technical/developer resources.

In Conclusion

PWAs are powerful, effective, fast and app-like.

It’s hard to imagine a mobile web property that could not be significantly improved via PWA implementation. They can also potentially eliminate the need for many “vanity” native apps that exist today.

In short, now is the time to integrate these technologies into your ecosystem of customer touch points.

Any and all projects including efforts pertaining to the mobile web need to take a long, hard look at Progressive Web Apps. If you’d like to discuss your specific situation in detail with one of our subject matter experts, drop us a line.