將 AMP 與您的應用程式整合

重要事項：本文件不適用於您目前選取的格式故事！

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

將連結轉換為 AMP

透過 AMP，幾乎可以立即在您的原生或行動 Web 應用程式中呈現外部網站。您可以透過將內容中的網址與其對應的 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 版本。

轉換連結的方法

有三種以程式設計方式轉換連結的方法

寫入時伺服器端 (建議)：在網址的寫入時透過 Google 的 AMP URL API 擷取 AMP 網址，並將 AMP 網址儲存在伺服器端。將原始網址和 AMP 網址都傳遞給用戶端，因為共用時可能需要原始網址。這是建議的方法，因為用戶端網路要求較少。採取這種方法時，務必定期 (例如每天) 掃描連結以尋找 AMP 版本，因為越來越多網站採用 AMP 格式。
讀取時伺服器端 (部分使用)：在將內容傳遞至用戶端之前，透過 Google 的 AMP URL API 擷取 AMP 網址。如上所述，將原始網址和 AMP 網址都傳遞給用戶端，因為共用時可能需要原始網址。這種方法適用於低扇出服務。
用戶端 (如果無法使用伺服器端)：從用戶端透過 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 檔案，方法是使用

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

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

更佳的使用者體驗，因為載入時間更快且延遲更低 (載入時間快 >1 秒)。
效能和頻寬優勢，因為額外快取了用戶端相依的成品，例如，根據用戶端的可視區域大小快取同一圖片的不同版本。
原始 AMP 檔案可能不再是有效的 AMP，這可能會導致不良的使用者體驗。在這種情況下，AMP 快取會提供 AMP 檔案的最後一個有效版本。
不夠正直的發佈者可能會向 AMP 快取檢索器和您的使用者提供兩個不同的文件。使用 AMP 快取可確保使用者始終看到與快取相同的 AMP 檔案。

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

實作 AMP 檢視器

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

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

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

當從平台 AMP Viewer 內共用 AMP 文件時，平台應在技術上可行時共用標準網址。例如，如果平台提供共用按鈕，則此按鈕應共用標準網址。

AMP Project 的理念是平台應能選擇向使用者呈現哪個版本的文件。因此，在共用至不同平台時，共用標準版本 (而非 AMP 版本) 最合理，然後預期目標平台做出正確的選擇。