Log InSign Up

AMP Web Push Setup

For Web Push notifications on Android AMP pages.

Suggest Edits

What is AMP?

AMP, which stands for Accelerated Mobile Pages, is an open source project created by Google which aims to make webpages and articles load very quickly on mobile devices. Most users will encounter these pages during a Google search, where a lightning bolt icon indicates the pages are AMP accelerated.

Recently, Google approved an extension for AMP pages authored by OneSignal that allows AMP pages to incorporate web push notifications. This is especially valuable for news publishers and bloggers, who previously have had to decide between supporting the speed of AMP pages or the audience-engagement of push notifications.

AMP Web Push is only supported on Android devices. It is not supported on iOS devices. While iOS devices do support AMP pages, web push is not supported on iOS.

How to Set Up Web Push on AMP Pages (non-Wordpress)

For Wordpress setup, see below

1. Add AMP to your site

Follow Google's AMP Setup Tutorial if you haven't added AMP to your site yet.

2. Add the AMP Web Push script

For all AMP pages on your site that you'd like to enable web push notifications, add the following script within your AMP page's <head> section:

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

🚧

AMP Pages Only

Do not add this code to non-AMP pages, as it will not do anything.

3. Configure the AMP Web Push extension

For HTTPS Sites

Download these files and add them to the root of your site, right click these files and "Save Link as...":

Then add this code in your AMP site's <body>.

  • Replace YOURDOMAIN.COM with the domain/subdomain users subscribe to
  • Replace YOUR-APP-ID with your app ID

🚧

Replace YOURDOMAIN.COM with the domain users subscribe to

Most HTTPS supporting web push will simply replace YOURDOMAIN.COM with their site's domain (e.g. their-site.com).

However, if you have a custom setup where users are subscribed to push.your-domain.com, you will need to replace YOURDOMAIN.COM with push.your-domain.com.

You should replace YOURDOMAIN.COM with the subdomain + domain that contains the OneSignalSDKWorker.js script.

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID"
    permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID"
    service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
  ></amp-web-push>

🚧

AMP Pages Only

Do not add this code to non-AMP pages, as it will not do anything.

For HTTP Sites

If you have selected My site is not fully HTTPS during setup, you will need to add this code in your AMP site's <body>.

  • Replace LABEL with your chosen label. Keep the .os.tc (e.g. yourlabel.os.tc) part.
  • Replace YOUR-APP-ID with your app ID
<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://LABEL.os.tc/amp/helper_frame?appId=YOUR-APP-ID"
    permission-dialog-url="https://LABEL.os.tc/amp/permission_dialog?appId=YOUR-APP-ID"
    service-worker-url="https://LABEL.os.tc/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
  ></amp-web-push>

🚧

AMP Pages Only

Do not add this code to non-AMP pages, as it will not do anything.

4. Set up your widget

Once you have OneSignal, AMP, and AMP Web Push implemented on your site, you will need to add your AMP Web Push widget. This widget will let users subscribe and unsubscribe to push notifications from your AMP Web Push page.

The following is an example AMP Web Push widget:

945

We recommend putting your AMP Web Push widget below the main content of your page (as in this example) for three important reasons:

  1. AMP widgets take up a fixed amount of vertical space, which cannot be hidden even if a user has subscribed. In other words, putting a widget at the top means every user (subscribed or not) coming to your AMP page has to scroll more to see the content they came for.

  2. It's best practice to get users to understand the value of your site before asking them to sign up for push notifications. Placing a button at the bottom of the page is a natural stopping point for the user that you can use to convert them to subscribers.

  3. The default AMP Web Push widget changes from a subscribe button to an unsubscribe button once a user subscribes. Thus, the unsubscribe button would be presented above the page contents and may be accidentally tapped.

To add an AMP Web Push widget that looks like the above, first add the following styles in your <head>:

<style amp-custom>
    amp-web-push-widget button.subscribe {
      display: inline-flex;
      align-items: center;
      border-radius: 2px;
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 10px 15px;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: #4A90E2;
      color: white;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    amp-web-push-widget button.subscribe .subscribe-icon {
      margin-right: 10px;
    }

    amp-web-push-widget button.subscribe:active {
      transform: scale(0.99);
    }

    amp-web-push-widget button.unsubscribe {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 45px;
      border: 0;
      margin: 0;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: transparent;
      color: #B1B1B1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
</style>

Then, add the AMP Web Push widget code at the bottom of your AMP pages content (we recommend adding this before the comments section, if you have one):

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    <amp-img
             class="subscribe-icon"
             width="24"
             height="24"
             layout="fixed"
             src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
    </amp-img>
    Subscribe to updates
  </button>
</amp-web-push-widget>
           

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
   <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
</amp-web-push-widget>

You may want to modify the exact call to action of this button. Some examples include:

  • Subscribe to updates from (your site)
  • Stay informed on (your site) updates
  • We need your permission to enable notifications
  • Get notifications on the latest (content you offer, e.g. 'space news')

🚧

Widget Action

Whether you choose to use a link (<a>) or button (<button>) inside <amp-web-push-widget>, remember to add the on="tap:amp-web-push.subscribe" property. For example:

<amp-web-push-widget ...>
  <button .... on="tap:amp-web-push.subscribe">

Without the on=... property, the button won't do anything when clicked!

5. Hide standard OneSignal JavaScript code on AMP pages

You probably already set up OneSignal on your site and added code to your page to load our SDK and initialize OneSignal.

This code must be removed when viewing an AMP page. The OneSignal SDK script reference and the initialization code must only be present on non-AMP pages.

AMP caches like Google will not recognize your AMP page as valid if you leave the OneSignal script reference and initialization code on your AMP page.

👍

Once you've added your AMP Web Push widget, you should be all set!

How to Set up AMP Web Push for Wordpress sites

1. Set up OneSignal on your Wordpress site

First follow our Wordpress setup guide to setup your OneSignal account and Wordpress site.

2. Set up AMP on your Wordpress site

The AMP for WP plugin allows you to add AMP to your Wordpress site, and supports Wordpress AMP Web Push. Follow the setup process for this plugin to get started.

Note: the WP AMP Themes plugin supports AMP but does not yet support AMP Web Push.

3. Enable AMP Web Push

Follow the AMP for WP OneSignal Integration documentation to enable AMP Web Push on Wordpress.

👍

You're all set! You should be able to send AMP Web Push notifications on your Wordpress site.

Testing HTTP AMP Pages

If you selected My site is not fully HTTPS during Web Push setup, you will not be able to test AMP Web Push in the normal way. However, Google provides an AMP Testing Tool you can use to preview your page.

Using Google's AMP Testing Tool

  1. Visit Google's AMP Testing Tool.

  2. Submit your URL to test.

  3. If your page is a valid AMP page, the page will say "Valid AMP page" in green. You then have the option to submit your page to Google's search results and preview your page's search result. Click Preview Search Result.

  4. After clicking Preview Search Result, a phone preview appears with your page in Google's search results. Click your search result link.

  5. Your AMP page inside the preview is real and AMP web push should be usable within this frame, because Google is serving your AMP page over its HTTPS domain, similar to other users will be using your AMP page after publishing.

Google's AMP testing tool does not work for http://localhost sites. For local AMP pages, you can run a basic HTTPS server to view your AMP page.

Troubleshooting

Cloudflare

If you use Cloudflare with "Rocket Loader" turned on, you may need to disable or prevent this setting from removing the AMP buttons.

Updated almost 2 years ago

What’s Next