Progressive Web AMP: Why combining AMP and PWA creates a faster, better mobile experience

WompMobile CEO presents at second annual AMP Conference and shares insights on how to combine Accelerated Mobile Pages with Progressive Web Apps to deliver the next generation in mobile-web development

Presenting at Google’s AMP Conf 2018 in Amsterdam, Madison Miner, CEO of WompMobile, walked the audience through how to combine the blazing-speed of Accelerated Mobile Pages (AMP) with the rich functionality of Progressive Web Apps (PWA). The merger of the two technologies into a single, seamless web experience is known as a Progressive Web AMP or PWAMP.

Madison Miner, WompMobile CEO, speaks about Progressive Web AMPs during second annual AMP Conf

“As standalone technologies, AMP and PWA have inherent limitations,” said Miner. “AMP pages render fast but lack functionality, while PWAs start slow, but offer the reliable and rich experience of a native app. By combining the two, the limitations are not only overcome but a superior experience is created. Progressive Web AMPs align both technologies to ensure customers start fast and stay fast throughout the shopping experience.”

Progressive Web AMPs dominate over legacy PWAs

Legacy PWAs only solve half the battle, as page-load speed is variable. The advent of Progressive Web AMPs –using Accelerated Mobile Pages (AMP) as the data source for your PWA – solves that problem by delivering ultra-portable, embeddable content units that are guaranteed to load instantly.

“All it takes is 3 seconds of load time to lose most of your users,” said Miner. “On mobile, milliseconds matter, and Progressive Web AMPs offer the fastest page loads possible.”

Combining AMP in PWA: How does it work?

The combination of AMP and PWA creates a seamless solution that offers a performant, elegant and user-centric experience.

The PWA app shell features a persistent header and menu – just like a native app – that loads AMP pages as the content source. AMP pages, in turn, are used as lightweight, pre-rendered and pre-cached pages that load instantly throughout the customer journey. Also, by using a Service Worker – a script that intercepts network requests and provides caching and offline access – a whole new set of powerful features is possible, including:

  • Offline browsing for users who experience intermittent network connectivity;
  • Instant, sub 1-second page loads with background updates;
  • Flexible and strategic caching; and
  • Push notifications

What does the customer journey look like on a Progressive Web AMP? It starts fast, and stays fast.

The customer journey is described in the following 5 steps:

1.) Discovery: Users search and discover content, which could be a product, an article or relevant information. From acquisition channels, such as Google and Bing, the user encounters AMP pages, which feature the lightning-bolt badge – a signal that the page is fast and beautiful. Because AMP pages stand out – and user’s understand the correlation between the badge and performance –click-through rates from search increase.

2.) Fast, First Impression: Once on the AMP page, as the user scrolls, reads and learns more, the Service Worker installs the PWA in the background. At the point of engagement (i.e. they click and take an action) the user seamlessly enters the full PWA.

3.) Ultra-Fast Navigation: Once in the PWA, the user is met with AMP-to-AMP navigation, making for fast page loads and transitions, which feel almost invisible.

4.) Rich Interactions and features: The PWA offers a silky-smooth, app-like experience with rich features, such as offline access and frictionless checkout, using Google’s Payment Request API, that keep users engaged throughout the journey.

5.) Easy Re-entry and repeat business: Because a PWA offers all the benefits of a native app, you can prompt users to add your app-icon to their home screen for easy re-entry and repeat business, as well as schedule push notifications based on user tags, time, date and time-since activities.

Progressive Web AMPs for e-commerce capture, engage and convert mobile shoppers

Progressive Web AMPs for e-commerce offer the best of both worlds – the immersive experience of a native app, plus the discoverability and convenience of the mobile web. Incredible speeds, smooth transitions and high-converting features make PWAs the ultimate shopping experience.

 

“Progressive Web AMPs are relatively new to the scene,” said Miner, “and there are a handful of examples – Carved.com and BMW.com being the latest – that demonstrate the new-found power that mobile websites can now achieve. As e-commerce retailers face new and challenging market forces, and technological disruptions, Progressive Web AMPs level the playing field by enabling mobile sites to attract, capture and convert traffic into predictable revenue.”

WompMobile is a full-service Progressive Web AMP agency

A Progressive Web AMP isn’t just a new website, it’s a radically new way to attract, engage and convert mobile shoppers. PWAs require a new set of engineering skills and architecture to manage events, caching, pre-rendering, predicting a user’s next move, and uniting each feature into a holistic, seamless and fast experience.

WompMobile is one of a handful of digital agencies with the experience, technology and proven success to combine AMP pages and PWAs to create Progressive Web AMPs. If you have any questions, please don’t hesitate to reach out.