重要提示：此文档不适用于您当前选择的格式广告！

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 兼容的服务工作线程 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），而不是放在子文件夹中。amp-web-push 只能在服务工作线程上传到的同一文件夹级别（包括子文件夹）工作，除非服务工作线程使用 HTTP 响应头 `Service-Worker-Allowed: /` 进行服务。此服务工作线程在后台运行，订阅和取消订阅用户的通知。如果您开发自定义推送解决方案，请参阅此示例，了解如何使您的服务工作线程与 amp-web-push 兼容。
`service-worker-scope（可选）`	要安装的服务工作线程的作用域。

属性

visibility（必需）

描述何时显示小部件。该值可以是 unsubscribed、subscribed 或 blocked 之一。

在计算用户的订阅状态时，小部件最初是隐藏的。

验证

请参阅 AMP 验证器规范中的 amp-web-push 规则。

需要更多帮助？

您已阅读此文档多次，但它实际上没有涵盖您的所有问题？也许其他人也有同样的感觉：请在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您为自己特别关注的问题进行一次性贡献。

转到 GitHub