Web Push Notifications for AMP Pages

Web Push Notifications for AMP Pages

What is AMP?

AMP or Accelerated Mobile Pages helps make webpages load almost instantaneously on mobile devices. This is an open-source project by Google and you will see these pages in Google Search, generally with a lightning icon next to them.

Google has now approved the Web Push AMP extension that allows subscriptions on AMP pages as well. This is great for news publishers as they now can reach to a huge user base with faster loading AMP pages and also increase their push subscriber base at the same time.

AMP Web Push is currently available on Android devices. Although iOS does support AMP, Apple has not yet added support for Web Push notifications. Once Apple adds the requisite support, AMP Web Push would be supported on iPhones and iPads as well.

How to setup AMP Web Push on your webpages

1. Add the AMP Web Push script to your web page.

For the AMP pages on your website where you would like to enable web push notifications, add the following script within the section.

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

2. Add the following CSS to your AMP Page.

This CSS is used to customize the Subscribe/Unsubscribe buttons on your AMP web page. You can change colors, design of the buttons. Place this CSS in the <head> section as well under <style amp-custom> (create if it does not exist).

.psa-web-push{padding-top:10px;text-align:center}.psa-amp-subscribe,.psa-amp-unsubscribe{padding:8px 15px;cursor:pointer;outline:0;font-weight:400;-webkit-tap-highlight-color:transparent}.psa-amp-subscribe{border-radius:2px;border:1px solid #007ae2;margin:0;font-size:16px;background:#0e82e5;color:#fff}.psa-amp-subscribe amp-img{width:20px;height:20px;vertical-align:sub;margin-right:4px}.psa-amp-unsubscribe{border-radius:2px;border:1px solid #b3b3b3;margin:0;font-size:15px;background:#bdbdbd;color:#555}.psa-amp-subscribe:active,.psa-amp-unsubscribe:active{transform:scale(.99)}

3. Upload required files

Download the following two files and add them to the root of your website

If you have not yet configured Web Push for your non-AMP pages, then you would also have to upload manifest.json and service-worker.js files to your website root as well. These can be found in the Integrate section under Universal Javascript.

4. Configure the AMP Web Push extension

Add the following code where you want to show the Subscribe/unsubscribe buttons to appear. Preferably at the end of the article or web page. Please replace "YOUR-WEBSITE-URL" with your website URL.

        <amp-web-push
        id="amp-web-push"
        layout="nodisplay"
        helper-iframe-url="https://YOUR-WEBSITE-URL/helper-iframe.html"
        permission-dialog-url="https://YOUR-WEBSITE-URL/permission-dialog.html"
        service-worker-url="https://YOUR-WEBSITE-URL/service-worker.js">
    </amp-web-push>

    <div class="psa-web-push">
        <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="40">
            <button class="psa-amp-subscribe" on="tap:amp-web-push.subscribe">
                <amp-img
                    width="20"
                    height="20"
                    layout="fixed"
                    src="data:image/svg xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48dGl0bGU UHVzaEFsZXJ0PC90aXRsZT48ZyBpZD0iRm9ybWFfMSIgZGF0YS1uYW1lPSJGb3JtYSAxIj48ZyBpZD0iRm9ybWFfMS0yIiBkYXRhLW5hbWU9IkZvcm1hIDEtMiI PHBhdGggZD0iTTEzMi4wNywyNTBjMTguNjIsMCwzMy43MS0xMS41MywzMy43MS0yMUg5OC4zNkM5OC4zNiwyMzguNDIsMTEzLjQ2LDI1MCwxMzIuMDcsMjUwWk0yMTksMjAwLjUydjBhNTcuNDIsNTcuNDIsMCwwLDEtMTguNTQtNDIuMzFWMTE0LjcyYTY4LjM2LDY4LjM2LDAsMCwwLTQzLjI0LTYzLjU1VjM1LjlhMjUuMTYsMjUuMTYsMCwxLDAtNTAuMzIsMFY1MS4xN2E2OC4zNiw2OC4zNiwwLDAsMC00My4yMyw2My41NXY0My40NmE1Ny40Miw1Ny40MiwwLDAsMS0xOC41NCw0Mi4zMXYwYTEwLjQ5LDEwLjQ5LDAsMCwwLDYuNTcsMTguNjdIMjEyLjQzQTEwLjQ5LDEwLjQ5LDAsMCwwLDIxOSwyMDAuNTJaTTEzMi4wNyw0NS40MmExMS4zMywxMS4zMywwLDEsMSwxMS4zNi0xMS4zM0ExMS4zMywxMS4zMywwLDAsMSwxMzIuMDcsNDUuNDJabTczLjg3LTE3LjY3LTYuNDUsOS43OGE4My40Niw4My40NiwwLDAsMSwzNi4xNSw1NC43N2wxMS41My0yLjA2YTk1LjIzLDk1LjIzLDAsMCwwLTQxLjIzLTYyLjVoMFpNNjQuNDYsMzcuNTJMNTgsMjcuNzVhOTUuMjMsOTUuMjMsMCwwLDAtNDEuMjMsNjIuNWwxMS41MywyLjA2QTgzLjQ2LDgzLjQ2LDAsMCwxLDY0LjQ1LDM3LjU0aDBaIiBmaWxsPSIjZmZmIi8 PC9nPjwvZz48L3N2Zz4="></amp-img>
                Subscribe to Notifications
            </button>
        </amp-web-push-widget>
        <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="40">
              <button class="psa-amp-unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
        </amp-web-push-widget>
    </div>

You may want to modify the exact call to action of the Subscribe button.

Some points to keep in mind while adding the AMP Web Push widget on your website:

1. AMP Web Push Notification supports only for HTTPS AMP websites & Android devices.

2. Users cannot be automatically prompted to subscribe to notifications on AMP pages. They have to click on the Subscribe button.

Reach your customers even when they aren't browsing your website