From AMP to PWA: Progressive Web AMPs — Google I/O 2017 Live Blogs

During the AMP Keynote on Day 1 of Google I/O 2017 we were presented with the concept of Progressive Web AMPs, the ability to combine Accelerated Mobile Pages with Progressive Web Apps. On Day 2 we were given a deep dive into the subject, and we were there to live blog it.

Approximate Read Time: 3 Minutes

My first live blog of day 2 of Google I/O once again focuses on Google’s Accelerated Mobile Pages (AMP) Project, as well as the Progressive Web Apps (PWAs) method of creating web applications with the feel and functionality of a native mobile app.  While most developers think you have to choose one or the other, this session was all about how you can use AMP and PWA together to “start fast, stay fast”

Session Summary

There are plenty of studies that to a user, a page loading in 0.1 seconds feels instant, a page loading in 1 second feels natural, but a page loading in 10 seconds is enough to completely lose the user’s attention.  On a recent study of the mobile web, it was determined that the average mobile page loading time on a 3G connection is 19 seconds (nearly twice enough to lose the user’s interest) and 77% of mobile sites take 10 seconds or more to load on 3G.  This unfortunately means that 77% of mobile page loads, the user is likely to leave the page before it finishes loading.

Progressive Web Apps help solve this problem by moving all of the resources that tend to slow down the page load into a local cache, but this only works on the second (and subsequent page loads), it doesn’t help the user if they leave your site before the first page loads.

AMP on the other hand is all about the first page load.  Pages loaded from the AMP cache load instantly thanks to prioritized content loading and above the fold pre-rendering.  Unfortunately only the first page load of a user’s session happens through a pre-rendered load on the AMP Cache.

AMP lets you “start fast”, and PWAs let you “stay fast”.  The majority of this session is about techniques you can use to do both together, use AMP to start so you can start fast, and then move the user from your AMP page to a PWA so the user’s session stays fast after that first pageload.

Progressive Web Apps work using a technology known as Service Workers.  A Service Worker is typically installed by Javascript and once ready it can be used to bypass a significant portion of the loading instead using a special application cache created by the Service Worker.  This is what makes subsequent pageloads faster as the backend resources are already loaded.

In addition to this acceleration, Service Workers allow you to add additional functionality to your website that would normally only be available in native mobile applications.  Features such as push notifications, full screen rendering and offline use are all enabled in a Progressive Web App through the Service Worker.

AMP Pages on the other hand make pages fast primarily by restricting the use of things such as javascript.  To give the developer (and user) the best of both worlds, AMP has a component called <amp-install-serviceworker>. This component allows you to install a serviceworker in the background even though AMP doesn’t allow you to use direct javascript.

Through this component, a user can find your site on Google Search, get an instant load of their first content thanks to AMP and the AMP Cache, but then be seamlessly upgraded from the AMP experience to a Progressive Web App experience so that all subsequent pageloads stay fast and can utilize these advanced functionality available in Progressive Web Apps.

The next thing they covered in the session was a means of using AMP pages as a backend for loading content into a PWA using a technique known as the Shadow DOM.  The Shadow DOM is a means of loading an entire document and rendering it inside an element without using iframes.

The AMP Project has a special version of the AMP Library to load into a Progressive Web App page known as “Shadow AMP”  With this version of the AMP Library, you can load and render AMP Pages as a data source that you can modify and render.  This allows you to use a single backend format (AMP) for both your AMP and PWA experiences rather than publishing to multiple different formats (AMP, HTML, JSON, etc).

Over all this was a very enlightening talk.  It is no longer a choice between starting fast (AMP) and staying fast (PWA), with Progressive Web AMPs (PWAMPs) you can have both.

Session Video

Live Blog Transcript