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 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub에서 샘플 수정하기