Thursday, June 28, 2018

Your Guide to AMPs + PWAs

If you’re looking to build a fast mobile web experience you may have come across two different mobile technologies to get you the speed you need: Progressive Web Apps (PWAs), or Accelerated Mobile Pages (AMPs). They both have their separate strengths, and definitely both give your mobile speed a needed boost, so how do you pick which one your brand should use? We’ve got some good news: you don’t have to choose between the two! By combining PWAs and AMPs, Google has created Progressive Web AMPs (PWAMPs)–the ultimate choice if you’re looking to build a superior mobile web experience with the fastest load times and seamless user experience.

Before we get into how combining the two creates the ultimate mobile web page, here’s a brief recap of PWAs and AMPs as separate technologies:

Progressive Web Apps
A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to its users. To simplify, you can think of it as a website that behaves like a mobile app, thereby improving the overall user experience by connecting the experience of an app with the reach of the web.

Accelerated Mobile Pages
Google designed AMPs with one thing in mind: speed. AMPs optimize mobile content which leads to a drastic reduction in load times and bounce rates on mobile devices. AMPs have 3 core components that help with speed and reliability, but at the end of the day they’re simply web pages that you can link to and are controlled by you.

PWA + AMP = PWAMP
Progressive Web Apps are known for their speed and frictionless user experience, which is why so many big-name brands are turning to them to increase mobile adoption and engagement. When the power of AMP is combined with the accessibility of PWAs, it makes for a lightning fast experience, even on first load, ensuring a decrease in bounce rates and an increase in engagement for your mobile site. There are three ways that you can combine AMPs with PWAs:

AMP as PWA
If your site doesn’t have too much interactivity, you can actually have an AMP that’s also a PWA. But just because it’s still technically an AMP, doesn’t mean you won’t receive the benefits of PWAs. You’ll still have Service Worker which provides the user with benefits like, offline access, fast load speeds, etc. Check out this example of an AMP with PWA features to see a little bit more of how this version of PWAMP works.

AMP in PWA
In this version, the AMPs act as a data source to power the PWA. This version is popular because AMPs were designed to be easy and safe to embed. The AMP team built a demo of this PWAMP version, I would recommend testing it out on a mobile device to view it on the platform it was designed for (but, since it’s a PWA, it still works great on desktop too).

AMP to PWA
As great as AMPs are, they simply don’t offer the same level of interactivity and engagement-enabling features as PWAs do. But with this version, you get the best of both worlds. The AMP acts as the entry point for your site, then “warms up” the PWA behind the scenes so it can switch over. That way, they user still gets the lightning fast load speed from the AMP, without losing all of the benefits the Service Worker offers.

It’s simple, faster load speeds from the AMPs, put together with the great engagement tools from the PWAs, making Progressive Web AMPs the ultimate mobile experience that consumers are craving.