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

amp-web-push

說明

允許使用者訂閱網站推播通知。

必要指令碼

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

支援版面配置

nodisplay

用法

開發人員撰寫依使用者訂閱狀態顯示的小工具。小工具由 AMP 元素組成，可以簡單到只是一個按鈕或文字連結。

點擊訂閱小工具會彈出一個頁面，提示使用者授權通知權限，並向服務工作站 (如下設定) 發出訊號，在背景中讓使用者訂閱推播。點擊取消訂閱小工具會向服務工作站發出訊號，在背景中取消使用者的推播訂閱。

<!-- A subscription widget -->
<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.unsubscribe">
    Unsubscribe from Notifications
  </button>
</amp-web-push-widget>

設定

amp-web-push 元件需要在您的網站上進行額外的整合。您需要將兩個 HTML 檔案 (已提供) 以及一個與 amp-web-push 相容的 Service Worker JavaScript 檔案上傳到您的網站。這三個檔案構成了以下描述的設定。

<amp-web-push
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/service-worker.js"
></amp-web-push>

所有屬性都是必要的，且所有 URL 都必須以相同的來源開頭 (例如 https://example.com)。

屬性	說明
`helper-iframe-url`	在此下載 `helper-iframe.html` 並將其上傳到您的網站。絕對 URL，以 `https://` 開頭，指向已上傳到您網站的 `helper-iframe.html` 已提供的 HTML 檔案。此頁面啟用 AMP 頁面與服務工作站之間的通訊，服務工作站負責訂閱和取消訂閱使用者。此頁面也有助於判斷通知權限狀態。
`permission-dialog-url`	在此下載 `permission-dialog.html` 並將其上傳到您的網站。絕對 URL，以 `https://` 開頭，指向已上傳到您網站的 `permission-dialog.html` 已提供的 HTML 檔案。此頁面會以彈出視窗開啟，並提示授權通知權限。
`service-worker-url`	絕對 URL，以 `https://` 開頭，指向已上傳到您網站的 JavaScript 服務工作站檔案。使用與 amp-web-push 相容的服務工作站。如果可以，請將服務工作站放在您網站的根目錄 (例如 your-site.com/service-worker.js)，而不是子資料夾。除非服務工作站以 `Service-Worker-Allowed: /` 的 HTTP 回應標頭提供，否則 amp-web-push 僅限於在與服務工作站上傳到的相同資料夾層級 (包括子資料夾) 運作。此服務工作站會在背景執行，並讓使用者訂閱和取消訂閱通知。如果您開發自訂推播解決方案，請參閱此範例，瞭解如何讓您的服務工作站與 amp-web-push 相容。
`service-worker-scope (選填)`	要安裝的服務工作站的範圍。

屬性

visibility (必要)

描述何時顯示小工具。值可以是 unsubscribed、subscribed 或 blocked 其中之一。

在計算使用者的訂閱狀態時，小工具最初會隱藏。

驗證

請參閱 AMP 驗證器規格中的 amp-web-push 規則。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有涵蓋您的所有問題？也許其他人也有同感：請在 Stack Overflow 上與他們聯絡。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性的貢獻。

前往 GitHub