Follow

Set Up Web Push Messaging

Set Up Web Push Messaging

To set up web push notifications, you need to:

Set Up a Service Worker

To implement push notifications for the web, you need a service worker. Service workers enable web pages to run scripts in the background (even when the page is not open) and receive requests.

If your web application does not already have a service worker, you can use the file provided in the Kahuna Javascript SDK 2.2.4 and later. If your web application already has a service worker, you need to ensure that push related handlers that invoke the Kahuna service worker API to your web service file are registered.

Follow the appropriate steps below.

If your web application does not already have a service worker

The Kahuna JavaScript SDK 2.2.4 and later provides the web service kahunaWebPushService.js. All you need to do is serve kahunaWebPushService.js at the root of your domain.

If your web application already has a service worker

Add the methods listed below to your service worker file.

If you have already defined event handlers for the events, add the Kahuna hooks at the top of each handler, as in the example below. If you do not yet have event handlers for these events, add both the handler and the Kahuna hooks. The last two methods must invoke event.waitUtil(...) on promise chains that include self.skipWaiting() and self.clients.claim().

  • Kahuna.processMessage(event) is called within the message handler. Returns true when the event is directed at Kahuna and requires no further processing.
  • Kahuna.processPush(event) is called within the push handler. Returns true when the event is directed at Kahuna and requires no further processing.
  • Kahuna.processNotificationClick(event) is called within the notificationclick handler. Returns true when the event is directed at Kahuna and requires no further processing.
  • Kahuna.processNotificationClose(event) is called within the notificationclose handler. Returns true when the event is directed at Kahuna and requires no further processing.
  • Kahuna.processPushSubscriptionChange(event) is in the event.waitUntil of pushsubscriptionchange. Returns a promise that must be waited for by the event.waitUntil in the handler.
  • event.waitUntil(self.skipWaiting()) is called within the install handler.
  • event.waitUntil(self.clients.claim()) is called within the activate handler.
Example
self.addEventListener('message', function(event) {
    if (Kahuna.processMessage(event)) {
        return; // This message is internal to Kahuna. No further processing needed.
    }
    // Write your code to processes non-Kahuna messages.
});
 
self.addEventListener('push', function(event) {
    if (Kahuna.processPush(event)) {
        return; // This push notification is internal to Kahuna. No further processing needed.
    }
    // Write your code to processes incoming non-Kahuna push notification.
});
 
self.addEventListener('notificationclick', function(event) {
    if (Kahuna.processNotificationClick(event)) {
        return; // The click occurred on a Kahuna notification. No further processing needed.
    }
    // Write your code to process clicks on non-Kahuna notifications here.
});
 
self.addEventListener('notificationclose', function(event) {
    if (Kahuna.processNotificationClose(event)) {
        return; // The close occurred on a Kahuna notification. No further processing needed.
    }
    // Write your code to process closes on non-Kahuna notifications here.
});
 
self.addEventListener('pushsubscriptionchange', function(event) {
    var promise = Kahuna.processPushSubscriptionChange(event);
    // Add additional promises to wait for via promise.then(...).
    event.waitUntil(promise);
});
 
self.addEventListener('install', function(event) {
    event.waitUntil(self.skipWaiting());
});
 
self.addEventListener('activate', function(event) {
    event.waitUntil(self.clients.claim());
});

Integrate the Service Worker into Your Web Application

Follow these steps to integrate Kahuna web push in your application.

  1. Initialize the Kahuna API.

    Kahuna.init(APP_KEY, APP_NAME, APP_VERSION);
  2. To initialize the WebPush code, download the file from https://tap-nexus.appspot.com/js/sdk/kahunaWebPushService.js. Store the file with your website javascript at https://kahunasite.com/js/kahunaWebPushService.js. Provide the location of the service worker you set up in the previous section. In this example:

    Kahuna.BrowserPush.init(document.location.origin + "/js/kahunaWebPushService.js");
  3. The BrowserPush initialization process is asynchronous. Make all subsequent calls to Kahuna.BrowserPush with the following.

    Kahuna.BrowserPush.ready(function(isEnabled) {
       if (isEnabled) {
          Kahuna.BrowserPush.*
          //Replace * with the name of the method 
       }
    });

    The isEnabled boolean provided to the ready callback function reflects the status of the users ability to receive push notifications. A value of true indicates that the user has given permission and is currently able to receive push notifications. A value of false indicates that the user has not accepted the browser prompt to allow notifications on the site, the service worker has not been properly installed, or the user’s browser does not support push notifications.

  4. When BrowserPush is ready and isEnabled is true, the application needs to send the user’s push token to Kahuna by invoking the following method.

    Kahuna.BrowserPush.subscribe();

    Note: You can call subscribe every time the page refreshes. An update is only sent to Kahuna if the push token has changed in the browser.

Example

The following example shows you how to initialize BrowserPush in a web application.

Kahuna.init(1234567890ABC, testApp, '1.0');
Kahuna.BrowserPush.init(document.location.origin + "/js/kahunaWebPushService.js");
Kahuna.BrowserPush.ready(function(isEnabled) {
    if (isEnabled) {
        // Notifications are allowed and ready
        Kahuna.BrowserPush.subscribe();
    } else {
        // Notifications are denied or init failed
    }
});

If you want to provide and manage functionality that allows users to turn push notifications on and off within your web application, use the Kahuna.BrowserPush.unsubscribe() method to communicate to Kahuna that the user no longer wants to receive notifications.

Note: Kahuna does not store the subscription status in the browser. That state must be managed by your web application.

Example

The following example shows you how you initialize BrowserPush in a web application with application-managed subscriptions.

// Initialization Code
Kahuna.init(1234567890ABC, testApp, '1.0');
Kahuna.BrowserPush.init(document.location.origin + "/js/kahunaWebPushService.js")
Kahuna.BrowserPush.ready(function(isEnabled) {
    if (isEnabled && user.isBrowserPushEnabled) {
        // Notifications are allowed and ready
        Kahuna.BrowserPush.subscribe();
    }
});

// Rendering and control code
getButtonLabel = function() {
    return (user.isBrowserPushEnabled) ?
         : Subscribe”;
};

Kahuna.BrowserPush.ready(function(isEnabled) {
    if (isEnabled) {
        subscribeButton = document.createElement(“button”);
        subscribeButton.textContent = getButtonLabel();
        subscribeButton.onclick = function() {
            if (user.isBrowserPushEnabled) {
                user.isBrowserPushEnabled = false;
                subscribeButton.textContent = getButtonLabel();
   		     Kahuna.BrowsePush.unsubscribe();
            } else {
                user.isBrowserPushEnabled = true;
                subscribeButton.textContent = getButtonLabel();
   		     Kahuna.BrowsePush.subscribe();
            }
        };  
    }
});

After you complete these steps, your team has a robust push notification delivery system capable of targeting key groups of users. Now, follow the steps in Set Up In-App Messaging.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments