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