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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>

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-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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する