Combining AMP and Progressive Web Apps: Strategies and Implementation

The article introduces Progressive Web Apps (PWAs) and Accelerated Mobile Pages (AMP), highlighting the need for fast first‑load times (under 3 seconds) and offline support to retain users.

It explains that while PWAs offer native‑like capabilities (offline, installable, push notifications), AMP excels at instant loading through strict static layouts and pre‑rendering, but lacks advanced features.

Three integration models are presented:

AMP as PWA : Use AMP pages that also include a service worker and manifest, enabling offline access and "add to home screen" functionality.

AMP to PWA : Publish content as AMP for instant loading, then use <amp-install-serviceworker> to cache resources and transition to a full PWA when the user navigates deeper, leveraging service‑worker fetch events.

AMP in PWA : Embed AMP pages inside a PWA (e.g., via shadow‑DOM) so the PWA can fetch AMP content via XHR, place it in a shadow root, and let a single AMP library instance handle multiple documents.

Implementation steps for the AMP‑to‑PWA approach include adding a service worker to AMP pages, caching all PWA assets during the install event, and intercepting navigation requests to serve the cached PWA instead of the AMP page.

The article also discusses progressive enhancement: if the browser does not support service workers, the user remains on the AMP version, with shell‑URL rewriting handling the fallback.

Finally, a React‑based demo called "The Scenic" showcases the combined technique, and a real‑world example (Mic’s new PWA) demonstrates near‑instant navigation using the described methods.