Saturday, August 25, 2018

Setup OneSignal Web Push Notification in AMP Blogger [Part 1]

    Install and Setup Web Push Notification Subscribe Button in Google AMP Blogger Template

    Warning! This Tutorial is for AMP Page Only, Don't implement this on Non-AMP Page, it's will do nothing
    Web Push Notification is a web service that website provides a simple and effective way to reconnect with users.

    Web Push Notification is very effective, so that your visitors receive notifications of the latest updates from your website. Users can press the "subscribe button" to get to the latest updates from web. 

    Currently there are many third party applications that offer this service, both free and paid. Among them, there are OneSignal, SendPulse, UrbanAirship, and others. They distribute the latest messages or updates from your website, with a very easy configuration and support both on http: // and https: //.

    But for now, only OneSignal Service can support web push notifications with Google AMP HTML-based websites. By relying on the amp-web-push.js component, the AMP website can implement Web Push Notification on the AMP page

    Before I discuss the implementation of Web Push on the AMP Page, I will first explain the advantages of creating a Web Push OneSignal Notification for a WebSite.
    • Increase the number of loyal visitors.
    • Send the latest updates, such as messages, advertisements or the latest articles.
    • Increase website conversion value.

    OneSignal AMP-WEB-PUSH on AMP Blogger


    To install AMP Web Push Notification on a website, you are required to inject the amp-web-push component and also upload 2 pages in your website directory, namely amp-helper-frame.html and amp-permission-dialog.html.

    If you use a blogger platform such as the blog amp-blogger.com, of course this is impossible. But there is a solution provided by OneSignal, by utilizing the label provided by OneSignal.

    Create an APP ID and OneSignal SDK Configuration


    To setup Web Push Notification on Blogger AMP, you need to register and create an APP on OneSignal. Go to https://onesignal.com, register using your Google account. Then create an App by clicking 'Add a New App'.

    Name the OneSignal APP, a pop-up modal will appear, then select Web Push and click Next.

    Pay attention to the following configuration, read carefully!:

    1. Choose Integration: Typical Site
    2. Site Setup: 


    • Site name: Your site name
    • Site URL: your site URL, fill with http:// or https:// . I recommend to enable HTTPS: // on your Blogger. Read this article: Enable HTTPS in Blogger.
    • Upload site icon: min 80px X 80px
    • Active 'my site is not fully https' (required), and fill Label name. Example: amp-blogger. So the Label address will be like this: amp-blogger.os.tc.
    3. Permission Prompt Setup

    • Click Add a Promt, pada promt type pilih Slide Promt dan click save. 
    • Kemudian anda akan dialihkan untuk konfigurasi HTTP Pop-Up. Silahkan isi text untuk kostumisasi tampilan text tersebut, kemudian klik save. 
    4. Ignore the configuration for tab Welcome Notification and Advanced. Click SAVE

    5. After the configuration process, you will get a script code like this. Please pay attention to your APP ID (yellow sign), because that will be needed later.

    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
    <script>
      var OneSignal = window.OneSignal || [];
      OneSignal.push(function() {
        OneSignal.init({
          appId: "a9416835-bc53-47db-a413-821b7c808c7c",
        });
      });
    </script>

    Please save the code in notepad. Next we will configure the subscribe button, to work on the Blogger AMP page.

    Please Read the PART 2 here: Create and Setup OneSignal Web Push Notification in AMP Blogger [PART 2]