AMP

將 AMP 與您的應用程式整合

重要事項:本文件不適用於您目前選取的格式 電子郵件

本指南適用於想要整合並連結至 AMP 頁面的行動和網路應用程式開發人員。例如,考慮一個行動聊天應用程式,該應用程式會載入共用網址的 AMP 版本,以便為使用者提供更快速的體驗。

透過 AMP,可以在您的原生或行動網路應用程式中近乎即時地呈現外部網站。您可以透過將內容中的網址與其對應的 AMP 網址 (如果存在) 進行比對,並開啟 AMP 版本而非原始版本來達成此目的。您可以使用 Google AMP URL API 等工具來協助您完成此操作。

例如,可以轉換以下訊息以提供 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. 寫入時伺服器端 (建議):在網址的寫入時透過 Google AMP URL API 擷取 AMP 網址,並在伺服器端儲存 AMP 網址。將這兩個網址都傳遞給用戶端,因為共用可能需要原始網址。這是建議的方法,因為用戶端網路請求較少。採用此方法時,定期 (例如,每天) 掃描連結以尋找 AMP 版本非常重要,因為網站越來越多地採用 AMP 格式。
  2. 讀取時伺服器端 (部分使用):在將內容傳遞給用戶端之前,透過 Google AMP URL API 擷取 AMP 網址。如上所述,將這兩個網址 (AMP 和非 AMP) 都傳遞給用戶端,因為共用可能需要原始網址。此方法適用於低扇出服務。
  3. 用戶端 (如果伺服器端不可行):從用戶端透過 Google AMP URL API 擷取 AMP 網址。如果伺服器端網址轉換不可行 (例如,對於使用端對端加密的訊息應用程式),請使用此方法。請務必在內容可用後立即觸發網址轉換,在任何使用者互動發生之前。

重要事項 – 絕不要因為使用者互動而透過 Google AMP API 請求 AMP 網址,因為這會導致應用程式效能降低,因為這會引入額外的網路請求。請改用上述三種方法之一。

Google AMP URL API

Google 提供 AMP URL API,用於擷取指定網址清單的相符 AMP HTML 網址 (官方文件 / 示範)。這些網址不需要是標準版本。如果存在 AMP 版本,則回應會包含原始 AMP 網址和 Google AMP 快取上快取 AMP 頁面的網址。

例如,對於給定的網址清單

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

回應主體包含 JSON 格式的 AMP 網址對應

{
  "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 頁面的網址。但是,您可以從傳回的 AMP 網址 (ampURL) 輕鬆衍生快取網址。

使用 AMP 快取

AMP 快取是一種以 Proxy 為基礎的內容傳遞網路 (CDN),用於傳遞有效的 AMP 文件。AMP 快取旨在

  • 僅提供有效的 AMP 頁面。
  • 允許有效率且安全地預先載入 AMP 頁面。
  • 對內容執行額外的使用者受益效能最佳化。

目前,有兩個 AMP 快取供應商

這提供了兩種選擇,可透過以下方式在應用程式中顯示 AMP 檔案

  1. 發佈者託管的版本
  2. AMP 快取中託管的版本

基於以下原因,我們建議使用 AMP 快取

  • 由於更快的載入時間和低延遲 (載入時間快 1 秒以上),因此使用者體驗更佳。
  • 由於額外快取用戶端相關的成品 (例如,根據用戶端的檢視區大小快取相同影像的不同版本),因此效能和頻寬效益更高。
  • 原始 AMP 檔案可能不再是有效的 AMP,這可能會導致不良的使用者體驗。在這種情況下,AMP 快取會提供 AMP 檔案的最後一個有效版本。
  • 不正直的發佈者可能會向 AMP 快取檢索器和您的使用者提供兩個不同的文件。使用 AMP 快取可確保使用者始終看到與快取相同的 AMP 檔案。

重要事項 – 透過 AMP 快取提供 AMP 頁面時,請提供檢視器體驗,清楚顯示 AMP 的來源,並讓使用者可以分享標準網址 (另請參閱以下兩節,以瞭解更多相關資訊)。

實作 AMP Viewer

AMP Runtime 提供 Viewer API,它提供一個協定,用於在 AMP Runtime 和 Viewer 之間傳送和接收訊息。這使得可以控制 AMP 文件的預先呈現、文章之間的滑動和 AMP Runtime 檢測。您可以在將 AMP Viewer 與 AMP 頁面連線指南中瞭解更多關於 AMP Viewer API 的資訊。適用於 網路iOS 的 Viewer 實作可在 GitHub 上取得。Android Viewer 尚不可用,請參閱 Stack Overflow 上 此解答,以瞭解如何為顯示 AMP 頁面最佳地設定 WebView。

以下是一些實作 AMP Viewer 的一般最佳實務

  • 從 AMP 快取提供 AMP 頁面 (載入時間快 1 秒以上)。
  • 顯示文章發佈者的來源 (例如,在可摺疊的標頭中)。
  • 提供分享動作 (另請參閱下方的「分享 AMP 內容」章節)。
  • 在以 webView 為基礎的 Viewer 中,啟用第三方 Cookie。
  • 為您的平台/應用程式設定參照位址。

分享 AMP 內容

從平台 AMP Viewer 內部分享 AMP 文件時,平台應在技術上可行時分享標準網址。例如,如果平台提供分享按鈕,則此按鈕應分享標準網址。

AMP Project 的理念是平台應選擇向使用者呈現哪個版本的文件。因此,當分享到不同的平台時,分享標準版本 (而不是 AMP 版本) 最有意義,然後期望目標平台做出正確的選擇。