Categories: AMP - Guide

How To Integrate Web Push Notification on AMP

Web push notification is clickable rich content messages that are sent to users who are subscribed to a specific website. Web push notifications can be delivered to mobile(s) or tablet(s) even if the browser is closed. So, the user doesn’t have to be on specific website or webpage to receive notifications.

Web push notifications are used to for delivering quality content to engaged users, allow us to effectively re-engage them with personalized, relevant content.

Web push notification has the following elements:

  • Title: Notification title is what the user sees first. (Write an eye-catching title for higher CTR)
  • Description: The description based on your title. (Should be short and effective)
  • Website Domain: The domain which is sending the web notification.
  • Banner Image: This can be a logo or an image from the article.

How do they work?

Web Push Notification uses two complementary APIs:

  • Push is invoked when a server supplies information to a service worker.
  • Notification is the service worker or web page script action showing information to a user.

AMP web push is specially developed for AMP websites, where user can able to subscribe to specific from AMP version of site.

Implementing Web Push Notification on AMP

1) Add AMP Web Push Notification Header Script

Add the following script in your <head>section. This piece of code will load the amp-web-push library by amp project.

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

2) Install service worker and other configuration

Web Push Notifications are based on service workers because they operate in the background. Means the code runs only if the user interacts with notification by clicking on it or closing it. OneSignal is one the service providers who support AMP.

For HTTPS Sites

Download the following files and add them to the root directory of your site:

Note: Right-click on above links and save the link as a local file

Add the following code in <body> of AMP page

<amp-web-push
  helper-iframe-url="https://example.com/helper-iframe.html?appId=YOUR-APP-ID"
  permission-dialog-url="https://example.com/permission-dialog.html?appId=YOUR-APP-ID"
  service-worker-url="https://example.com/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
></amp-web-push>
  • Replace example.comwith your domain.
  • Replace YOUR-APP-IDwith your OneSignal app ID.

3) Create a Widget

You have to create two buttons: Subscribe and Unsubscribe. So, users will able to subscribe and unsubscribe from AMP pages.

<!– A subscription widget – subscribe button –>
<amp-web-push-widgetvisibility=“unsubscribed“ layout=“fixed“ width=“250“height=“80“>
<buttonon=“tap:amp-web-push.subscribe”>Subscribe to push Notifications</button>
</amp-web-push-widget>

<!– An unsubscription widget – unsubscribe button –>
<amp-web-push-widget visibility=“subscribed“ layout=“fixed“ width=“250“height=“80“>
 <button on=“tap:amp-web-push.unsubscribe“>Unsubscribe from push Notifications</button>
</amp-web-push-widget>

Implementing Web Push Notification using AMPforWP

1) Enable it

Go to AMP options panel -> General settings -> Push Notifications -> Enable OneSignal Push Notifications.

2) APP ID

Enter the APP ID. You can also find it in OneSignal’s Plugin settings:

3) HTTP Sites only [ Experimental ]

AMP web push is only compatible with URLs that begin with https://.

OneSignal still supports AMP web push for HTTP sites that use a subdomain of OneSignal (e.g. subdomain.os.tc), but when viewing the HTTP site as an AMP page, the site URL must be HTTPS.

When users view an AMP page on an actual mobile device, they are often directed by Google to a URL like “https://www.google.com/amp/www.site.com”. This means that HTTP sites that don’t ordinarily support HTTPS will actually support HTTPS thanks to Google if the AMP page is cached by Google and navigated from Google’s search results.

If your site doesn’t have an HTTPS connection(SSL), then enable the HTTP Site option and enter the subdomain:

You can even find it in your OneSignal’s plugin Settings:

Good going! Now you should able send Web Push Notifications.

Over to you

If you have any queries from this article or you are looking for any tutorial/guide on AMP, let us know in the comment section below.

Ahmed Kaludi

I'm one of the Lead developers on this project. Know more about me at http://ahmedkaludi.com

Share
Published by
Ahmed Kaludi
Tags: web push notification
6 years ago

Related Post