AMP

将 AMP 与您的应用集成

重要提示:此文档不适用于您当前选择的格式 广告

本指南面向希望集成和链接到 AMP 页面的移动和 Web 应用开发者。例如,考虑一个移动聊天应用,该应用加载共享 URL 的 AMP 版本,以便为用户实现更快的体验。

使用 AMP,可以在您的原生或移动 Web 应用中近乎即时地呈现外部网站。您可以通过将内容中的 URL 与其对应的 AMP URL(如果存在)进行匹配,并打开 AMP 版本而不是原始版本来实现此目的。您可以使用 Google 的 AMP URL API 等工具来帮助您完成此操作。

例如,可以通过将所有 URL 替换为它们匹配的 AMP 版本(如果存在)来转换以下消息,以提供 AMP 版本。为了减少加载时间并保证提供有效的 AMP,您应该链接到 AMP 缓存中的缓存 AMP 页面。

原始消息

This is a message with links to an <a href="http://www.example.org/a">
article with AMP version</a> and an <a href="http://www.example.org/b"> article without AMP version</a>.

转换后的消息

This is a message with links to an <a href="https://www-example-org.cdn.ampproject.org/c/www.example.org/a">
article with AMP version</a> and an <a href="www.example.org/b"> article without AMP version</a>.

提示 – 考虑为用户提供通过应用中的首选项设置查看非 AMP 版本而不是 AMP 版本的选项。

有三种以编程方式转换链接的方法

  1. 写入时服务器端(首选):在 URL 的写入时通过 Google 的 AMP URL API 检索 AMP URL,并在服务器端存储 AMP URL。将两个 URL 都传递给客户端,因为可能需要原始 URL 进行共享。这是推荐的方法,因为客户端网络请求较少。当采用此方法时,定期(例如,每天)扫描链接的 AMP 版本非常重要,因为越来越多的网站正在采用 AMP 格式。
  2. 读取时服务器端(一些使用):在将内容传递给客户端之前,通过 Google 的 AMP URL API 检索 AMP URL。如上所述,将两个 URL(AMP 和非 AMP)都传递给客户端,因为可能需要原始 URL 进行共享。此方法对于低扇出服务可能很有用。
  3. 客户端(如果服务器端不可行):从客户端通过 Google 的 AMP URL API 检索 AMP URL。如果服务器端 URL 转换不可行(例如,对于使用端到端加密的消息传递应用),请使用此方法。确保在内容可用后立即触发 URL 转换,在任何用户交互发生之前。

重要提示 – 切勿因用户交互而通过 Google 的 AMP API 请求 AMP URL,因为这会引入额外的网络请求,从而降低应用的性能。相反,请使用上述三种方法之一。

Google 的 AMP URL API

Google 提供了 AMP URL API 来检索给定 URL 列表的匹配 AMP HTML URL(官方文档 / 演示)。URL 不需要是规范版本。如果存在 AMP 版本,则响应包括原始 AMP URL 和 Google AMP 缓存中缓存 AMP 页面的 URL。

例如,对于给定的 URL 列表

{"urls": [
  "https://www.example.org/article-with-amp-version",
  "http://www.example.com/no-amp-version.html"
]}

响应正文包含 JSON 格式的 AMP URL 映射

{
  "ampUrls": [
    {
      "originalUrl": "https://www.example.org/article-with-amp-version",
      "ampUrl": "https://www.example.org/article-with-amp-version/amp",
      "cdnAmpUrl": "https://www-example-org.cdn.ampproject.org/c/s/www.example.org/article-with-amp-version"
    }
  ],
  "urlErrors": [
    {
      "errorCode": "NO_AMP_URL",
      "errorMessage": "AMP URL not found.",
      "originalUrl": "http://www.example.com/no-amp-version.html"
    }
  ]
}

注意 – 无法通过 AMP URL API 检索非 Google AMP 缓存上缓存 AMP 页面的 URL。但是,您可以轻松地从返回的 AMP URL (ampURL) 派生缓存的 URL。

使用 AMP 缓存

AMP 缓存是基于代理的内容交付网络 (CDN),用于交付有效的 AMP 文档。AMP 缓存旨在

  • 仅提供有效的 AMP 页面。
  • 允许高效且安全地预加载 AMP 页面。
  • 对内容执行其他有益于用户的性能优化。

目前,有两个 AMP 缓存提供商

这提供了两种在应用中显示 AMP 文件的方法,可以使用

  1. 发布者托管的版本
  2. AMP 缓存中托管的版本

我们建议出于以下原因使用 AMP 缓存

  • 由于更快的加载时间和低延迟(加载时间快 >1 秒),用户体验更好。
  • 由于客户端相关工件的额外缓存,例如,根据客户端的视口大小缓存同一图像的不同版本,因此具有性能和带宽优势。
  • 原始 AMP 文件可能不再是有效的 AMP,这可能会导致不良的用户体验。在这种情况下,AMP 缓存会提供 AMP 文件的最后一个有效版本。
  • 一个不太正直的发布者可能会向 AMP 缓存爬虫和您的用户提供两个不同的文档。使用 AMP 缓存可保证用户始终看到与缓存相同的 AMP 文件。

重要提示 – 通过 AMP 缓存提供 AMP 页面时,请提供清晰显示 AMP 来源的查看器体验,并允许用户共享规范 URL(有关此内容的更多信息,请参见以下两部分)。

实现 AMP 查看器

AMP 运行时提供了一个 Viewer API,它提供了一种协议来在 AMP 运行时和查看器之间发送和接收消息。这使得可以控制 AMP 文档的预渲染、在文章之间滑动和 AMP 运行时检测。您可以在将 AMP 查看器与 AMP 页面连接 指南中了解有关 AMP 查看器 API 的更多信息。WebiOS 的查看器实现可在 GitHub 上获得。Android 查看器尚不可用,有关如何最好地配置 WebView 以显示 AMP 页面,请参见 Stack Overflow 上的 此答案

以下是一些实现 AMP 查看器的通用最佳实践

  • 从 AMP 缓存提供 AMP 页面(加载时间快 >1 秒)。
  • 显示文章的发布者来源(例如,在可折叠的标题中)。
  • 提供共享操作(另请参阅下面的“分享 AMP 内容”部分)。
  • 在基于 webView 的查看器中,启用第三方 Cookie。
  • 为您的平台/应用设置引荐来源。

分享 AMP 内容

当从平台 AMP 查看器中分享 AMP 文档时,平台应在技术可行的情况下分享规范 URL。例如,如果平台提供了分享按钮,则此按钮应分享规范 URL。

AMP 项目的理念是平台应该选择向用户呈现文档的哪个版本。因此,在共享到不同的平台时,共享规范版本(而不是 AMP 版本)最有意义,然后期望目标平台做出正确的选择。