AMP

将 AMP 与你的应用集成

重要提示:此文档不适用于你当前选择的格式 stories

本指南面向希望集成和链接到 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 版本)最有意义,然后期望目标平台做出正确的选择。