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

amp-web-push

描述

允许用户订阅 Web 推送通知。

必需脚本

<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` 并将其上传到您的网站。以 `https://` 开头的绝对 URL，指向上传到您网站的提供的 HTML 文件 `helper-iframe.html`。此页面启用 AMP 页面和服务工作线程之间的通信，服务工作线程订阅和取消订阅用户。此页面还有助于确定通知权限状态。
`permission-dialog-url`	在此处下载 `permission-dialog.html` 并将其上传到您的网站。以 `https://` 开头的绝对 URL，指向上传到您网站的提供的 HTML 文件 `permission-dialog.html`。此页面以弹出窗口形式打开，并提示请求通知权限。
`service-worker-url`	以 `https://` 开头的绝对 URL，指向上传到您网站的 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