AMP Web Push

📘

Please integrate AMP analytics from here before integrating AMP Web Push.

AMP Web Push

Since the implementation of AMP is quite different from the normal HTML pages and it has many restrictions, Web Push Notification will not work by just injecting the Moengage Web SDK and serviceworker.
But with the increasing demand of AMP users, Google has recently published a separate plugin to support it. This will enable the News Publishers, Bloggers or anyone who uses AMP, to deliver their webpages quickly by engaging their users by subscribing them to Push Notification.
Currently, the support is only for Android Devices.

Setting up AMP Web Push

Please follow these steps to integrate moEngage Web Push in your AMP site:

1. Add AMP Web Push script

Add this line in the <head> section of your .amp file where you want to use Web Push.

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

2. Add Helper files

Download these 3 files and and place it in the root directory of your website (right click and "Save Link as..."):

amp-helper-iframe.html
amp-permission-dialog.html
serviceworker_amp.js

Use these files in next step

3. Add these code inside your <body>:

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://DOMAIN.COM/amp-helper-frame.html"
    permission-dialog-url="https://DOMAIN.COM/amp-permission-dialog.html"
    service-worker-url="https://DOMAIN.COM/serviceworker_amp.js?app_id=APP_ID"
  ></amp-web-push>

Replace DOMAIN.COM by your actual domain.
Replace APP_ID by your App Id provided by moEngage.

📘

Make sure all the three files are served from the same source and origin and should have https

4. Add the Subscribe / Unsubscribe Buttons:

<div class="web-push">
      <!-- A subscription widget -->
      <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
        <button class="subscribe" on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
      </amp-web-push-widget>

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

Subscribe / Unsubscribe buttons or Amp Web Push Widgets are needed to subscribe or unsubscribe the user to AMP Web Push Notification.
You have to option to use <button> or <a>, just that on="tap:amp-web-push.subscribe" should be there. It will not work without the on=...
You may also want to modify the exact call to action of this button. Use your own text or leave it as it is.

The layout used is fixed and only Subscribe or Unsubscribe widget will be shown at a time.
However you design it the way you want by modifying the CSS. The default CSS is:

5. Style the Widgets by placing this CSS codes in <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:active {
          transform: scale(0.9);
        }
    
        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);
          background-color: #eee;
          border-radius: 2px;
        }

        amp-web-push-widget button.unsubscribe:active {
          transform: scale(0.9);
        }
    </style>

Thats it!