AMP Web Push

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:
1.
​helper-iframe.html​
2.
​service-worker.js​
3.
​permission-dialog.html​
There are two customizable blocks in the permission-dialog.html file: 
Subscribe to push notifications
1
<div class="subscribe" permission="default">
2
    <p class="message">
3
    {Subscribe to push notifications}
4
    </p>
5
</div>
Copied!
Unblock push notifications
1
<div class="blocked" permission="denied">
2
    <p class="message">
3
    {Unblock push notifications in your browser settings}
4
    </p>
5
</div>
Copied!
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:
1
 <style amp-custom>
2
    .subscribe {
3
        /* your css here */
4
    }
5
    
6
    .blocked {
7
        /* your css here */
8
    }
9
</style>
Copied!
Permission dialog
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
1
<head>
2
    ...
3
    <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
4
    ...
5
</head>
Copied!
2. Add the following code to the <body> tag: 
amp-web-push
1
<body>
2
    <amp-web-push
3
    id="amp-web-push"
4
    layout="nodisplay"
5
    helper-iframe-url="https://{domain}/helper-iframe.html"
6
                 permission-dialog-url="https://{domain}/permission-dialog.html"
7
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
8
    ></amp-web-push>
9
    ...
10
    <!-- Start Subscribe to notifications button -->
11
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
12
    <button class="subscribe" on="tap:amp-web-push.subscribe">
13
        {Text on Subscribe button}
14
    </button>
15
    </amp-web-push-widget>
16
    <!-- End the Subscribe to notifications button -->
17
    <!-- Start Unsubscribe from notifications button -->
18
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
19
    <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
20
        {Text on Unsubscribe button}
21
    </button>
22
    </amp-web-push-widget>
23
    <!-- End Unsubscribe from notifications button -->
24
    <!-- Start Fallback if a user blocks notifications -->
25
    <amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
26
    <div class="fallback">
27
            {Fallback if a user blocks notifications}
28
        </div>
29
    </amp-web-push-widget>
30
    <!-- End Fallback if a user blocks notifications -->
31
...
32
</body>
Copied!
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:
1
<style amp-custom>
2
    amp-web-push-widget button.subscribe {
3
        /* your css here */
4
    }
5
    amp-web-push-widget button.unsubscribe {
6
        /* your css here */
7
    }
8
    amp-web-push-widget .fallback {
9
        /* your css here */
10
    }
11
</style>
Copied!
To check whether you’ve done everything right, please use https://search.google.com/test/amp

Chrome and Firefox Web Push for HTTP websites

Next - Pushwoosh SDK

Cross-platform Frameworks

Last modified 2yr ago

Copy link

Contents

Overview

Integrate AMP into your website

Integrate AMP Web Pushes