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-web-push

用法

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