AMP Web Push

Implement web push notifications on AMP web pages

AMP pages support mobile web pushes on Android devices only.

Overview

AMP is an open-source Google framework for developing user-first web pages loading nearly instantaneously.

Integrating the AMP Web Push component into your AMP web pages, you can reach out to your customers when they’re surfing the web on their mobile browsers.

Integrate AMP into your website

Add the following files to your website’s root directory:

There are two customizable blocks in the permission-dialog.html file:

Subscribe to push notifications

<div class="subscribe" permission="default">
    <p class="message">
    {Subscribe to push notifications}
    </p>
</div>

Unblock push notifications

<div class="blocked" permission="denied">
    <p class="message">
    {Unblock push notifications in your browser settings}
    </p>
</div>

Where:

{Subscribe to push notifications} — a CTA message asking users to allow push notifications;
{Unblock push notifications in your browser settings} — a CTA message prompting users to unblock push notifications in their browser settings (in case push notifications are explicitly blocked by a user).

To customize the permission dialog appearance, add the following code to the <head> tag:

 <style amp-custom>
    .subscribe {
        /* your css here */
    }
    
    .blocked {
        /* your css here */
    }
</style>

Integrate AMP Web Pushes

To implement web push notifications on AMP pages, add the amp-web-push component to each AMP page.

To do so, follow these two steps:

1. Add the following script to the <head> tag:

amp-web-push

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

2. Add the following code to the <body> tag:

amp-web-push

<body>
    <amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://{domain}/helper-iframe.html"
                 permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
    ></amp-web-push>
    ...
    <!-- Start Subscribe to notifications button -->
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
        {Text on Subscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End the Subscribe to notifications button -->
    <!-- Start Unsubscribe from notifications button -->
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
    <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
        {Text on Unsubscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End Unsubscribe from notifications button -->
    <!-- Start Fallback if a user blocks notifications -->
    <amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
    <div class="fallback">
            {Fallback if a user blocks notifications}
        </div>
    </amp-web-push-widget>
    <!-- End Fallback if a user blocks notifications -->
...
</body>

Where:

{domain} — your website URL,
{applicationCode} — your Pushwoosh app code,
{senderId} — Sender ID from your Firebase console,
{applicationServerKey} — Server Key from your Firebase console,
{Text on Subscribe button} — a text on a button enabling push notifications,
{Text on Unsubscribe button} — a text on a button disabling push notifications,
{Fallback if a user blocks notifications} — a fallback block that is displayed when a user blocks push notifications.

To customize buttons’ style, add the following code to the <head> tag:

<style amp-custom>
    amp-web-push-widget button.subscribe {
        /* your css here */
    }
    amp-web-push-widget button.unsubscribe {
        /* your css here */
    }
    amp-web-push-widget .fallback {
        /* your css here */
    }
</style>

To check whether you’ve done everything right, please use https://search.google.com/test/amp

PreviousChrome and Firefox Web Push for HTTP websites NextCross-platform Frameworks

Last updated 5 years ago