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 缓存是用于提供有效 AMP 文档的基于代理的内容交付网络 (CDN)。 AMP 缓存旨在

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

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

这提供了两种选择,可以通过使用以下方式在应用中显示 AMP 文件

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

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

  • 由于加载时间更快和延迟更低(加载时间快 1 秒以上),用户体验更好。
  • 由于额外的客户端依赖项工件缓存(例如,根据客户端的视口大小缓存同一图像的不同版本),性能和带宽得到了提升。
  • 原始 AMP 文件可能不再是有效的 AMP,这可能会导致不良的用户体验。 在这种情况下,AMP 缓存将提供 AMP 文件的最后一个有效版本。
  • 一个不那么正直的发布者可能会向 AMP 缓存爬网程序和您的用户提供两个不同的文档。 使用 AMP 缓存可确保用户始终看到与缓存相同的 AMP 文件。

重要提示 – 通过 AMP 缓存提供 AMP 页面时,请提供一个查看器体验,该体验清楚地显示 AMP 的来源,并为用户提供共享规范 URL 的可能性(有关此内容的更多信息,另请参阅以下两部分)。

实施 AMP 查看器

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

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

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

共享 AMP 内容

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

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