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:
- How to display non-AMP pages in the PWA app-shell;
- Pre-fetching AMP pages to create smooth page transitions; and
- Reducing duplicate code to make updating easier.
Non-AMP in PWA, pre-fetching and easy updates
Delivering non-AMP pages in the PWA
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.
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.
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.