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

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)，而不是子資料夾。除非 Service Worker 以 `Service-Worker-Allowed: /` 的 HTTP 回應標頭提供，否則 amp-web-push 僅限於在 Service Worker 上傳到的相同資料夾層級 (包括子資料夾) 運作。此 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