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>
Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.
Stack Overflow'a git Açıklanmayan bir özellik mi var?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
Örneği GitHub'ta düzenle