將 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>.
轉換連結的方式
有三種以程式設計方式轉換連結的方式
- 寫入時伺服器端 (建議):在網址的寫入時透過 Google AMP URL API 擷取 AMP 網址,並在伺服器端儲存 AMP 網址。將這兩個網址都傳遞給用戶端,因為共用可能需要原始網址。這是建議的方法,因為用戶端網路請求較少。採用此方法時,定期 (例如,每天) 掃描連結以尋找 AMP 版本非常重要,因為網站越來越多地採用 AMP 格式。
- 讀取時伺服器端 (部分使用):在將內容傳遞給用戶端之前,透過 Google AMP URL API 擷取 AMP 網址。如上所述,將這兩個網址 (AMP 和非 AMP) 都傳遞給用戶端,因為共用可能需要原始網址。此方法適用於低扇出服務。
- 用戶端 (如果伺服器端不可行):從用戶端透過 Google AMP URL 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 快取
AMP 快取是一種以 Proxy 為基礎的內容傳遞網路 (CDN),用於傳遞有效的 AMP 文件。AMP 快取旨在
- 僅提供有效的 AMP 頁面。
- 允許有效率且安全地預先載入 AMP 頁面。
- 對內容執行額外的使用者受益效能最佳化。
目前,有兩個 AMP 快取供應商
這提供了兩種選擇,可透過以下方式在應用程式中顯示 AMP 檔案
- 發佈者託管的版本
- AMP 快取中託管的版本
基於以下原因,我們建議使用 AMP 快取
- 由於更快的載入時間和低延遲 (載入時間快 1 秒以上),因此使用者體驗更佳。
- 由於額外快取用戶端相關的成品 (例如,根據用戶端的檢視區大小快取相同影像的不同版本),因此效能和頻寬效益更高。
- 原始 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 版本) 最有意義,然後期望目標平台做出正確的選擇。