2. Now create a widget to give user to subscribe to push notification. Make two buttons , one for subscribe and one for unsubscribe. You can remove unsubscribe button but it will recommended by google for better user experiences. Add this code in body part.

Note : Visibility tag is required here. Visibility will take three value namely subscribe , unsubscribe or blocked . Widget will show and hide on the basis of user’s subscription state .For ex. first time user will see widget with visibility unsubscribe and if user subscribe the push, he will see widget with visibility subscribe .

3 . Now it’s time to install service worker and other configuration. For this you have to integrate three files in your root folder of our web site and your site must be on https. This three files are as following:

Now question is for what purpose we are adding these three files

helper-iframe-url : This page works as a mediator between amp and service worker, to enable communication which subscribes and unsubscribes the user. Notification permission status is also determined by this page.

Permission-dialog-url : This page is for user interaction which open a page as a pop up and prompts for notification permissions.

Service-worker-url : As you know it will run in background which subscribe, unsubscribe the users or display notifications to them.

If you don’t know about Service Workers, you can use third party sites which provide complete solution for Web Push Notifications like NotifyVisitors

Important Points to note to activate Web Push Notification on your AMP pages.