Progressive Web AMPs: The story so far, including trends, tips and results

At AMP Conf 2018, Google, WompMobile and the creative agency behind BMW.com walked through the latest progress, insights and trends with the AMP plus PWA combination, known as Progressive Web AMPs

Madison Miner, CEO of WompMobile, ventured into the nitty gritty and talked numbers, code examples and development tips based on the company’s experience building  Progressive Web AMPs in the wild. Specifically, his presentation dove into the following three lessons:

  1. How to display non-AMP pages in the PWA app-shell;
  2. Pre-fetching AMP pages to create smooth page transitions; and
  3. Reducing duplicate code to make updating easier.

Non-AMP in PWA, pre-fetching and easy updates

Delivering non-AMP pages in the PWA

Not all pages are great candidates for AMP. Pages that depend on JavaScript and Canvas can be impossible to convert to valid AMP. However, using a variety of techniques, including the shadow-dom and iFrames, AMP pages can be distributed in the PWA, ensuring a harmonized user experience, smooth transitions and that the app-shell header is always present.

Pre-fetching AMP pages to deliver a fast transitions

One of the best features of a Progressive Web AMP is the ability to anticipate a user’s next move. It’s like being able to see the future and pre-fetch an AMP page before the user clicks on it,  making the transition – and page delivery – fast and seemingly invisible. Pre-fetching is straightforward using an IntersectionObserver. A simplified code sample is below. Enjoy.

Eliminate duplicate code for easy updates

The beauty of using AMP pages as the data source of your PWA is you reduce duplicate engineering, creating a single code base. However, there are some challenges that must be overcome:

  • Delivering a consistent header and menu on both AMP and PWA;
  • AMP pages use AMP components; and
  • The PWA app-shell cannot use AMP components.

So what do you do? Simply: You eliminate JavaScript from the header and use techniques, like the checkbox-hack for menus and accordions. This allows you to create a single header that is used in AMP and the PWA, which is both AMP compliant and maintains rich interactivity. The result is a consistent user experience in both AMP pages discovered in search and in the full PWA.

How does AMP in PWA work?

The AMP and PWA combination creates an ultra-fast experience that captures users in search and keeps them engaged all the way through to checkout. Incredible speeds, smooth transitions and high-converting features make Progressive Web AMPs the ultimate shopping experience. But how does it work? Let’s breakdown the anatomy of a Progressive Web AMP.

The PWA app shell features a persistent header and menu that loads AMPs as the data source or content pages. AMP pages provide lightweight, pre-rendered and pre-cached pages that load instantly throughout the mobile experience. Also, by using a Service Worker – a script that intercepts network requests – powerful features are possible, including offline access, push notifications and flexible and strategic caching.

The PWA app shell features a persistent header and menu that loads AMPs as the data source or content pages.

Progressive Web AMPs rival the desktop

As a capstone to his talk, Madison emphasized that Progressive Web AMPs really work – delivering real-world returns to e-commerce retailers embracing faster, more elegant mobile experiences.

“A common theme that we hear from e-commerce retailers is that the majority of their growth and traffic comes from mobile, but the majority of transactions still happens on the desktop,” said Miner. “For the first time ever, we’re seeing conversion rates on mobile that rival the desktop. And it’s no surprise, as Progressive Web AMPs have everything you could ever ask for in a mobile experience – from sub 1-second page loads and offline access to frictionless, one-tap checkout.”

To learn more about WompMobile and our turnkey Progressive Web AMP service, please reach out and schedule a consultation with one of our mobile specialists.