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

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 元素組成，可以是按鈕或文字連結等簡單的形式。

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

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

屬性

visibility (必要)

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

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

驗證

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

需要更多協助嗎？

您已將本文件讀過很多遍，但仍未涵蓋您的所有問題？或許其他人也有相同感受：請在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub