AMP: Building Accelerated Mobile Pages

Loading AMP with Shadow AMP

First, we'll create an HTML page that will be our PWA (/ch11/ampinpwa/pwa.html), and we'll include the Shadow AMP library like this:

<script async src="https://cdn.ampproject.org/shadow-v0.js"></script>

It's not possible to use the Shadow AMP runtime in an AMP page--it's used to load AMP content into a non-AMP container or shell page.

We can check if Shadow AMP is ready to use with this code:

(window.AMP = window.AMP || []).push(function(AMP) {  // Shadow AMP is now ready to use  showAMPContent(url);});

So we'll need to write the showAMPContent() function. But before we do, we'll set a few things up. First, we'll add a container element to hold the AMP content:

<div id="container"></div>

Next, we'll add a function ...