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 上编辑示例