Everything You Need to Know about Progressive Web Apps for Ecommerce

Progressive Web Apps (PWAs) combine the high-converting features of an app with the wide reach of the web. Since the majority of online shopping traffic comes from mobile, these characteristics make PWAs the perfect solution for retailers trying to drive engagement and revenue. Here’s everything you need to know about Progressive Web Apps for ecommerce. 

Responsive Web and Native Apps Aren’t Enough

Many retailers assume that responsive web design is the best way to optimize their website for mobile. But in reality, using responsive on it’s own simply reflows content from one device to another. It ignores the expectations of today’s mobile customer for fast speeds, app-like experiences, and the latest features available on their device.

When responsive doesn’t produce the desired conversion rates, retailers often turn to native apps. While the app experience usually drives higher conversions, native apps are very expensive to build and maintain, and only reach a small audience. Consumers spend 60% of their total mobile time in only 3 apps, most of which are owned by Facebook and Google.

Enter, Progressive Web Apps for Ecommerce

Google introduced Progressive Web App technology in 2015 to address these realities faced by retailers. PWAs include the high-converting features of a native app but they’re still websites, accessed directly in the web browser rather than an app store download. The app-like experience results in 50% higher conversions – plus, PWAs get a healthy SEO boost from Google.

Because Progressive Web Apps solve the fundamental challenges associated with mobile web conversion rates, they’re catching the attention of retailers and analysts alike.

“Put aside 20 years of desktop web legacy, and reinvent the role mobile web plays in customer engagement. As a digital business professional, it’s time to start over and build progressive, app-like mobile web experiences.”
Reinvent the Web to Win the Mobile Moment [paywall],
Forrester Research, Inc., 17 January 2017

A New Approach to Mobile Optimization

While websites are optimized for users to get informational content, web apps are optimized to help users accomplish tasks quickly.

Because apps are all about accomplishing tasks, retailers must think about the web differently than they have in the past. They need to optimize for “time to task completion.” Progressive Web Apps include a host of features and functionality to help shoppers complete a task (or purchase) more quickly.

The Anatomy of a Progressive Web App

Progressive Web Apps include features and functionalities to create engaging shopping experiences that convert.

Instant page loads: Progressive Web Apps load all cached content instantly. For example, content downloaded for the product listing page can be used as a placeholder on the product display page, giving the perception of an instantaneous response. Your customers won’t see the expected flash of white screen as they navigate between pages, and common elements, such as the page header, will persist throughout the transition. Watch the video below to see how downloaded content can be reused in a new contexts.

Web push notifications: Web push notifications can re-engage customers even when their mobile browser is closed. Since web push is a relatively new channel, it’s less noisy than email and ensures your message doesn’t get lost in overflowing inboxes. Industry benchmarks show that 2.7x more people will open and click a web push notification compared to email.

Progressive Web Apps for Ecommerce: Web Push vs. Email

*The view rate on web push is equivalent to the open rate on email as the web push message is displayed right on the user’s screen.

Sources: https://sumo.com/stories/email-signup-benchmarks, https://mailchimp.com/resources/research/email-marketing-benchmarks/, Mobify Research & Development

Payment Request API: Payment Request API is a simple javascript API built directly into the browser to enable fast, seamless, and secure payments. Payment Request is a perfect example of optimizing for task completion – it eliminates checkout forms so that shoppers can quickly complete their purchase. Watch this webinar from Google Product Manager, Zach Koch, to learn more.

Progressive Web Apps for Ecommerce: Payment Request API

Offline Mode: Offline mode allows users to continue browsing even in areas with low to no connectivity. It’s not meant for users to go into the desert for weeks at a time and continue to shop on their phone, but rather for day-to-day life where signals are intermittent. It continues to power an interactive experience when connectivity is poor or non-existent by delivering pre-cached content through Service Workers. Watch the video below to see how it works.

Add to Homescreen: Once a customer reaches a certain level of engagement, you can prompt them to add a shortcut to their homescreen – providing the same visibility and access as a native app. All future visits from the homescreen will have an even more app-like look and feel with full-screen mode.

Full-Screen Mode: Full-screen mode offers shoppers an immersive experience without the distraction of the URL bar.

How is this Possible on the Web?

Doing things like push notifications and offline mode were previously impossible on the web due to the limitations of the browser – but Service Workers have unlocked these capabilities.

The Service Worker is a technology introduced by Google that allows you to control network requests programmatically (which allows you to build offline experiences), as well as run tasks in the background (which allows you to send and display push notifications).

Benefits of Progressive Web Apps for Ecommerce

Fast: Progressive Web Apps for ecommerce are up to 4 times faster than responsive or m.dot websites, thanks to both real and perceived performance enhancements. User interactions happen at 60 frames per second, and pages load in milliseconds, not seconds.

Accelerated Mobile Pages (AMP) can be combined with PWAs to enable landing pages to load instantly from search results. AMP pages are lightweight versions of landing pages that Google caches to load instantly, while the PWA loads in the background to ensure the experience “starts fast, and stays fast.” 

Reliable: Progressive Web Apps load instantly and never show the dreaded Chrome dinosaur, even in uncertain network conditions. Retailers must support the shopper’s context, and on mobile, that often includes areas with bad service – like the subway or an elevator. Offline mode ensures those shoppers stay engaged through those moments of limited or no connectivity.

Engaging: The fast, immersive experience offered through Progressive Web Apps keeps customers engaged. Web push notifications also provide a channel to engage customers in real-time based on their behavior or location. Mobify customer eXtra saw a 4x increase in return visits when shoppers subscribed to web push notifications, and they spent twice as much time on the site.

Mobile-first: Progressive Web Apps use mobile design patterns from the app world to make them truly mobile-first. They consider the needs and context of the mobile user separately from the user who may be sitting at a large desktop screen, and who may have more time and less distractions.

High-Converting: All these benefits ultimately lead to higher mobile conversions. The average Mobify customer sees 50% more mobile conversions through their Progressive Web App.

Challenges of Progressive Web Apps for Ecommerce

Progressive Web Apps are not websites but large web applications, and there’s 180 degrees of difference between building websites and building apps. They require application architecture including event management, state, and caching.  

Caching is a difficult problem because it’s inherently about tradeoffs between performance and freshness. Caching is a critical component of Progressive Web Apps as this is part of what allows instant rendering. Saying that getting your caching architecture right is hard is an understatement – you can spend thousands of hours on this problem alone.  

Progressive Web Apps can be incredibly fast – but they don’t come like that automatically. PWAs are applications, and applications need to “boot” when visitors arrive on the first page of the site. Booting quickly requires a sophisticated understanding of mobile web performance.

Mobify has spent thousands of hours learning and perfecting building Progressive Web Apps for ecommerce. Our commerce component library is designed for performance, and features 100% test coverage, support for accessibility, and internationalization out of the box. We also have a user interface kit that is based on years of ecommerce experience and research to make sure you’re using industry best practices out-of-the-box. A software as a service offering means a strategic partnership that ensures your future needs are met, not just the requirements at the time the project is kicked off. Before deciding to build a Progressive Web App on your own, make sure that your team can address these 10 problems

To learn more about the impact a Progressive Web App could have on your mobile revenue and engagement, talk to one of our mobile commerce experts.

Leave a Reply

Notify of
Resource ad

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in ecommerce so you can effectively engage your customers and drive revenue.

Related Articles