WompMobile and Google Team Up to Discuss the Future of the Mobile Web at SXSW 2018

WompMobile CEO unpacks the advantages of a Progressive Web AMP versus legacy PWAs
SXSW 2018: Progressive Web AMP
Madison Miner, WompMobile, and Chen Shay, Google, discuss the future of mobile at SXSW 2018

During the SXSW session ‘5+ Billion AMP Pages: The Future of the Mobile Web,’ WompMobile and Google walked through the latest advancements enabling mobile experiences to achieve greater performance and reliability. Madison Miner, WompMobile CEO, unpacked the benefits of building PWAs using Accelerated Mobile Pages as the data source – a new pattern called a Progressive Web AMP.

“PWAs offer a new way for retailers to attract customers by delivering fast page loads and engaging features to capture more revenue,” said Madison Miner, CEO of WompMobile. “But not all PWAs are created equal. Progressive Web AMPs provide an edge over legacy PWAs with greater speed and increased performance -without duplicate engineering.”

A Progressive Web AMP reuses AMP pages – previously only intended for acquisition channels – for the content pages of the primary website, while adding in rich, e-commerce functionality. This new pattern solves the engineering burden of legacy PWAs, which require duplicate interfaces for both the PWA experience and the AMP pages – doubling the work and maintenance. “Progressive Web AMPs offer a better mouse trap,” said Madison.

Legacy PWAs versus Progressive Web AMPs
Legacy PWAs versus Progressive Web AMPs

“AMP pages are like portable content units that are guaranteed to load fast and are available through Content Delivery Networks, caches and Service Workers,” said Madison. “On a cold load, Progressive Web AMPs appear instantly to users, while legacy PWAs struggle to catch up. A new era of mobile performance is now achievable thanks to the combination of AMP, PWA and Service Workers.”

The anatomy of a Progressive Web AMP

A Progressive Web AMP integrates three technologies: PWA components, Service Workers and Accelerated Mobile Pages. During the talk, Madison broke down each element and how the pattern is a winning combination. Let’s take a look.

Accelerated Mobile Pages are lightweight, portable content units that:

  • Guarantee fast load times;
  • Are cacheable, pre-fetched and pre-rendered;
  • Utilize the world’s largest web-component library for rich interactions;
  • Rely on the AMP-validator to ensure the critical path is not blocked; and
  • Feature the AMP badge in acquisition channels, leading to better user engagement and SEO.

PWA components provide a rich experience that merges the feel of a native app with the discoverability of a website, offering compelling experience features, including:

  • Smooth page transitions;
  •  An installable, home-screen icon for easy, repeat business;
  • Frictionless, auto-fill payment options; and
  • Asynchronous background loading on the first visit and instantly on repeat visits.

Service Workers intercept network requests to offer powerful features, such as:

  • Push notifications;
  • Offline browsing to keep users connected during spotty network conditions;
  • Instant page loads with background updates; and
  • Flexible and strategic caching.

How all three technologies come together is illustrated in the following two images:

PWA + Service Worker

What is a PWA?
The anatomy of a PWA (app-shell and service workers)

PWA + Service Worker + Accelerated Mobile Pages

What is a PWA?
The anatomy of a PWA (Accelerated Mobile Pages as portable content units)

Loaded with high-converting features, Progressive Web AMPs can also predict a users next move and pre-download pages before they even click.  They also offer full interactivity, smooth transitions, instant page loads and frictionless checkout, creating the ultimate shopping experience. And the experience continues after users leave. Using Push Notifications, you can re-engage users providing targeted, tailored and timely information.

“It’s no surprise Progressive Web AMPs convert customers and offer retailers a mobile experience that rivals the desktop,” said Madison.

Tips for unleashing the potential of Progressive Web AMPs

During the SXSW talk, Madison also shared tips and advice for how to build Progressive Web AMPs.

Pro tip 1: Leveraging AMP functionality

One of the prevailing myths about AMP is that to achieve instant page loads, e-commerce functionality takes a hit. “It’s simply not true,” said Madison. From search auto-complete and product filters to real-time pricing, AMP enables all the complex functionality for rich experience. Two powerful AMP components that power e-commerce functionality are amp-bind and amp-list.

  1. Amp-bind provides custom interactivity and brings e-commerce pages to life by updating the experience based on customer interactions, such as selected product colors, sizes and other user-driven actions.
  2. Amp-list fetches dynamic content from a JSON endpoint and is great for showing variable information on a product page, for example, such as real-time pricing and inventory.

Pro tip 2: Setting up your Service Worker

The first step in setting up a Service Worker is to check that it’s being served over HTTPs. Secondly, it must be registered in AMP using amp-install-serviceworker to install a Progressive Web AMP in the background. “And be sure to install the Service Worker from the root website,” said Madison. From there, you determine your caching strategy for various content types. For example, you’ll likely want to cache all your product pages but never your checkout flow. There are many approaches to caching but a solid strategy is stale-while-revalidate because it’s ideal for updating content that does not update frequently and when the latest version in non-essential.

Pro tip 3: Building a PWA App-Shell

Lastly, the PWA app-shell provides an initial static frame or layout including a persistent header and menu, just like a native app. This frame loads the AMP content progressively and dynamically, allowing users to engage with the app whether online or offline. In order to reduce the load time of the header, the trusty checkbox hack eliminates JavaScript, while allowing complex interactions, slide-in menus and accordions. To learn more how to build a Progressive Web AMP, watch Madison’s presentation at AMP Conf this March in Amsterdam.

The Payoff: Your Website Becomes Your Mobile App, But Better

It’s no surprise that the combination of AMP in PWA creates a profit machine. Need proof? During a two-month A/B test for Carved.com – an e-commerce retailer that specializes in custom, wooden phone cases – the Progressive Web AMP delivered on every important metric, including a 75% increase in e-commerce conversion rates. Yes, Progressive Web AMPs crush it.

PWA e-commerce case study
PWA e-commerce case study

Final Thoughts

There’s no denying that the reach of the mobile web is growing. Consumers rely on their devices to get the information they need and they expect it to be instant, convenient and easy. Ownership of smartphones in the U.S. has reached 77 percent, which makes sense, as most retailers see the majority of their growth coming from mobile. However, even though mobile traffic dominates, the majority of transactions and revenue still happen on desktop. “Progressive Web AMPs narrow the conversion delta between screen sizes and, for the first time, mobile is rivaling the desktop.”

The web was built for desktop and is no longer compatible for the demands of mobile users. The advent of Progressive Web AMPs is changing that by narrowing the performance gap and arming retailers with a radical new way to reach, engage and convert mobile shoppers.

“Progressive Web AMPs eliminate the sluggish, conversion-killing mobile standards of yesterday and place speed, performance and the user experience at the heart of any retailer’s mobile strategy.”

WompMobile is a full-service Progressive Web AMP agency

WompMobile is a platform technology that converts websites into fast, beautiful Progressive Web AMPs. If you have any questions, please don’t hesitate to reach out.