amp-web-push

简介

amp-web-push 组件允许用户订阅 Web 推送通知。

设置

在标头中导入 amp-web-push 组件。

<script
  async
  custom-element="amp-web-push"
  src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"
></script>

此演示中使用 amp-form 组件发送 POST 请求，以便可以准备并发送通知。

<script
  async
  custom-element="amp-form"
  src="https://cdn.ampproject.org/v0/amp-form-0.1.js"
></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>

基本用法

amp-web-push 组件需要两个额外的 HTML 文件以及一个与 amp-web-push 兼容的服务工作线程。这三个文件构成如下所述的配置。

<amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="https://amp.org.cn/documentation/examples/components/amp-web-push/amp-web-push-helper-frame.html"
  permission-dialog-url="https://amp.org.cn/documentation/examples/components/amp-web-push/amp-web-push-permission-dialog.html"
  service-worker-url="https://amp.org.cn/documentation/examples/components/amp-web-push/sw.js"
  service-worker-scope="https://amp.org.cn/documentation/examples/components/amp-web-push/"
>
</amp-web-push>

单击订阅小部件会弹出一个页面，提示用户获取通知权限，并向服务工作线程（如下配置）发送信号，以在后台将用户订阅推送。在此示例中，我们正在拦截对 onMessageReceivedSubscribe 的调用，并将订阅对象存储在 IndexedDB 中。

<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="500"
  height="70"
>
  <button on="tap:amp-web-push.subscribe">
    Subscribe to Notifications
  </button>
</amp-web-push-widget>

单击取消订阅小部件会向工作线程发送信号，以在后台取消用户推送订阅。在此示例中，我们还将从 IndexedDB 中删除先前存储的订阅对象。

<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="500"
  height="180"
>
  <button on="tap:amp-web-push.unsubscribe">
    Unsubscribe from Notifications
  </button>
  <form method="post" action-xhr="https://amp.org.cn/documentation/examples/components/amp-web-push/send-push" target="_top">
    <input type="submit" value="Send Web Push" />
    <div submitting>Sending Push message...</div>
    <div submit-success>Web Push sent!</div>
    <div submit-error>Something went wrong.</div>
  </form>
</amp-web-push-widget>
<amp-web-push-widget
  visibility="blocked"
  layout="fixed"
  width="250"
  height="80"
>
  Looks like you've blocked notifications!
</amp-web-push-widget>

需要进一步解释？

如果此页面上的解释没有涵盖你的所有问题，请随时与其他 AMP 用户联系，讨论你的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的长期参与者，但我们也欢迎你为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例