Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • websites

amp-web-push

Introduction

The amp-web-push component allows users to subscribe to web push notifications.

Setup

Import the amp-web-push component in the header.

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

The amp-form component is being used in this demo, to send a post request so the notification can be prepared and sent.

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

Basic usage

The amp-web-push component requires two additional HTML files as well as an amp-web-push compatible Service Worker. These three files form the configuration described below.

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

Clicking the subscription widget pops up a page prompting the user for notification permissions and signals the service worker (configured below) to subscribe the user to push in the background. On this example, we are intercepting the call to onMessageReceivedSubscribe, and storing the subscription object on 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>

Clicking the unsubscription widget signals the worker to unsubscribe the user from push in the background. On this example, we'll be also removing the previoulsy stored subscription object from 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.dev/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 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例