1. Home
  2. Technical docs
  3. How to add web push notifications

How to add web push notifications

Requirements

  • Push API requires HTTPS protocol with valid SSL certificate. SSL-only support provides better protection for the user against man-in-the-middle attacks intended to obtain push subscription data. We recommend to redirect all HTTP requests to HTTPS or at least redirect user to HTTPS before they try to subscribe.
  • Google Chrome or Firefox browser, check current browser support: http://caniuse.com/#search=Push%20API

Integration steps

Here are some integration steps that you are supposed to follow if you want add push notification to your web-site:

  • Update Exponea integration snippet (script tag) from app->settings->web integrations

web integration
Code

  • Upload file “service-worker.js” to your web root directory. Content of this file should be:
    importScripts('https://api.exponea.com/js/service-worker.min.js');

    Test if newly created script is available on root of your domain: “https://yourdomain.com/service-worker.js”;
    Note: replace exponea.com with infinario.com when using infinario integration

  • Upload file “manifest.json” (needed only for working with Google Chrome)
    content:

    {
        "name": "Exponea Example",
        "short_name": "ExponeaExample",
        "start_url": "/",
        "display": "standalone",
        "gcm_sender_id": "130945280786"
    }
    

    (all settings are customizable, but don’t change gcm_sender_id)

  • Add link tag to your HTML pages (add it into HTML HEAD tag)
    <link rel="manifest" href="/manifest.json">

    Test if newly created file is available on root of your domain: “https://yourdomain.com/manifest.json”;

  • Setup weblayer with subscribe button or integrate these 4 methods in javascript:
    • subscribe to notifications, returns callback with status string (error / permission-denied / subscribed)
    • unsubscribe, returns callback with status string (error / unsubscribed)
    • check if push notif. are available, returns callback with boolean status
    • check subscription, returns callback with two booleans, first tells you if you are subscribed, second if user blocks notifications

    Here is example:

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
    
        $(function() {
          var popup = $('.notification');
          var buttons = $('.notification .subscribe, .notification .unsubscribe');
          var enableButton = $('.notification .subscribe');
          var disableButton = $('.notification .unsubscribe');
          var blocked = $('.notification .blocked');
    
          // show or hide buttons and info msg
          var updateStatus = function() {
            exponea.notifications.isSubscribed(function(subscriptionActive, notificationsDenied) {
              buttons.removeClass('disabled').hide();
              if (subscriptionActive) {
                disableButton.show();
              } else {
                enableButton.show();
              }
              if (notificationsDenied) {
                buttons.addClass('disabled');
                blocked.removeClass('hidden');
              }
            });
          };
    
          // show subscribe buttons only if notifi. are available
          exponea.notifications.isAvailable(function(status) {
            if (status) {
              popup.removeClass('hidden');
              updateStatus();
            }
          });
    
          enableButton.on('click', function() {
            buttons.addClass('disabled');
            exponea.notifications.subscribe(function(status){  // status could be: error / permission-denied / subscribed
              updateStatus();
            });
            return false;
          });
    
          disableButton.on('click', function() {
            buttons.addClass('disabled');
            exponea.notifications.unsubscribe(function(status){ // status could be: error / unsubscribed
              updateStatus();
            });
            return false;
          });
        });
    </script>
    
    <div class="notification alert alert-warning hidden" role="alert">
      <a href="#" class="subscribe btn btn-primary">Enable notifications</a>
      <a href="#" class="unsubscribe btn btn-primary">Disable notifications</a>
      <span class="blocked hidden">
        Notifications are blocked, <a href="https://support.google.com/chrome/answer/3220216?hl=en">configure</a>
      </span>
    </div>

     

    How does it look like?

    Don’t hesitate and click and inspire yourself here https://notification-demo.exponea.com/

    How do you integrate it with Exponea app?

  • The first step is creating scenario:
  • app->campaigns->scenarios
    scenarios
  • You add push notification in your scenario:
  • Every scenario needs to be triggered somehow. If you want to send the newsletter right now, so you’ll use the now trigger,etc. So add some trigger and some condition
  • in condition you have to select customers matching attribute browser_push_notification has value
  • In the end you have to connect them.

    Adjust notification

    You can adjust the notification according to you. You can change title, message, url.

    Then you can preview it and it should looks like this :

Side note: Script service-worker.js cannot be run in Google Tag Manager. This file contains definition of a ServiceWorker, which needs to be *registered* to enable delivering and showing push notifications in browser. There are security considerations to be aware when registering a service worker. Service worker file must be hosted on HTTPS on same domain.

… This effectively means that service workers and their service worker clients need to be hosted over HTTPS. …

… Therefore, service workers cannot be hosted on CDNs. …

Read more here: https://w3c.github.io/ServiceWorker/#security-considerations

Updated on October 20, 2017

Was this article helpful?

Related Articles