Integrate AMP Content

These are the preferred ways of integrating and accessing AMP Cache URLs based on your application type and the different platforms.

AMP Cache URLs in web applications

If your document has a canonical version for desktop and an AMP version for mobile, link to AMP Cache URLs in the AMP version.

To ensure the fastest version of a webpage, open AMP Cache URLs on the mobile device's system browser: on an Android device, in Chrome; on an iOS device, in Safari.

AMP Cache URLs in iOS applications

SFSafariViewControllers are the preferred way to open links in an iOS app. They share the same browser state with the system browser (Safari). However, there is no way to further optimize the AMP experience with SFSafariViewController due to the lack of pre-rendering APIs.

AMP Cache URLs in Android applications

Chrome Custom Tabs are the preferred way to open links in an Android app. They are fast and secure, and they share the browser state with Chrome. This means if users are logged into a website in Chrome, they are logged into the same website in a Custom Tab.

Custom Tabs work very well with AMP. With mayLaunchUrl(url, moreUrls), they provide a pre-rendering API to either fully pre-render a single page or pre-connect to multiple pages.

You should do three things to get the best performance out of a custom tab:

  • Warm up the custom tab (this saves up to 700ms when you open a link with it).
  • Prefetch content for URLs the user is likely to open (likelihood >50%). Use mayLaunchUrl for this.
  • Perform a DNS preconnect if the user might click one of several items (for example, links in an article). This will perform a DNS lookup for all URLs, but does not download any content. To do this, set the first two parameters in mayLaunchUrl to null and pass the list of URLs via the bundle.

Chrome Custom Tabs can determine if the user is using the phone on a metered network or if it’s a low-end device. On lower-end devices, pre-rendering has a negative effect on the overall performance and won’t pre-fetch or pre-render. So, there’s no need to optimize your application for those cases.