Web Push Notifications

Enable push notifications

In order to enable push notifications for Ocamba.Hood, enter push initialisation token inside Hood tag snipet In the Ocamba.Push -> Application section, go to the token tab and click Copy.

push: YOUR_PUBLIC_PUSH_TOKEN

example:

    Hood('init','YOUR_API_KEY', { push: 'YOUR_PUBLIC_PUSH_TOKEN' })



Service worker

Web Push Notifications require Service Worker file to be available on your domain in order to subscribe and receive web push notifications.

  1. In the Ocamba.Push -> Application menu, go to the “Download Your SDK” section and click Download.

  2. Manually create service worker file by adding following code inside the file:

importScripts("https://cdn.ocmhood.com/sdk/osw.js");
Customizing Your Service Worker Integration

Follow these steps for your specific setup if you need to:

  • Place service worker files into a subdirectory
  • Rename the files
  • Include multiple service workers on an origin

Options: serviceWorkerFile -> default value /sw.js serviceWorkerScope -> default value highest root folder of serviceWorkerFile

To set up the service worker files in a subdirectory on Custom Code Setup, set up your init call similar to this:

    Hood('init','YOUR_API_KEY', { 
        push: 'YOUR_PUBLIC_PUSH_TOKEN', 
        serviceWorkerFile: '/my_sub_dir/worker.js',
        serviceWorkerScope: '/my_sub_dir/' 
    })

Alternative approach is to use the Service-Worker-Allowed HTTP Header when serving your Service Worker file. By configuring your server to return Service-Worker-Allowed: / in the response for the Service Worker in the response for the Service Worker, this will instruct the browser to broaden the scope and allow that scope to be used.

Default message if (oswbox){ let oswc = { title: “Your default title”, options : { “body”: “Your default body”, } }; oswbox.setConfig(oswc); }



Methods

MethodParametersDescription
pushStatuscallbackReturns the state of a user notification permission on the global scope.
pushRequestpermissioncallbackRequests permission prompt from the user for the current origin to display notifications.
pushMessageNotification Object,callbackCreates a web notification on an active service worker and show it to visitor.

function myPushStatus(status){
    console.log(status);
}

Hood('getPushStatus', myPushStatus)



Events

Ocamba.Hood events are accessed via event call

Hood('event','EVENT_NAME', callback);

NameListen toDescription
Push alertonPushShowEmitted when native push notification prompt is shown
Push allowonPushAllowEmitted when visitor clicks on Allow button of notification prompt
Push blockonPushBlockEmitted when visitor clicks on Block button of notification prompt
Push blockedonPushBlockedEmitted when push is initialised and if repeated visitor has blocked push
Push grantedonPushGrantedEmitted when push is initialised and if repeated visitor has allowed push

function myOnPushAllow(){
    console.log('visitor allowed push');
}

Hood('event','onPushAllow', myOnPushAllow);



Notification Object

NameTypeDescription
titleStringThe title that must be shown within the notification
optionsNotification Options ObjectAn object that allows configuring the notification.



Notification Options Object

NameDescription
actionsAn array of actions to display in the notification. The members of the array should be an object literal. It may contain the following values:
actionA DOMString identifying a user action to be displayed on the notification.
titleA DOMString containing action text to be shown to the user.
iconA USVString containing the URL of an icon to display with the action. Appropriate responses are built using event.action within the notificationclick event.
badgea USVString containing the URL of an image to represent the notification when there is not enough space to display the notification itself such as for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
bodyA string representing an extra content to display within the notification.
dataArbitrary data that you want to be associated with the notification. This can be of any data type.
dirThe direction of the notification; it can be auto, ltr or rtl
icona USVString containing the URL of an image to be used as an icon by the notification.
imagea USVString containing the URL of an image to be displayed in the notification.
langSpecify the lang used within the notification. This string must be a valid BCP 47 language tag.
renotifyA boolean that indicates whether to suppress vibrations and audible alerts when reusing a tag value. If options’s renotify is true and options’s tag is the empty string a TypeError will be thrown. The default is false.
requireInteractionIndicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is false.
silentWhen set indicates that no sounds or vibrations should be made. If options’s silent is true and options’s vibrate is present a TypeError exception will be thrown. The default value is false.
tagAn ID for a given notification that allows you to find, replace, or remove the notification using a script if necessary.
timestampA DOMTimeStamp representing the time when the notification was created. It can be used to indicate the time at which a notification is actual. For example, this could be in the past when a notification is used for a message that couldn’t immediately be delivered because the device was offline, or in the future for a meeting that is about to start.
vibrateA vibration pattern to run with the display of the notification. A vibration pattern can be an array with as few as one member. The values are times in milliseconds where the even indices (0, 2, 4, etc.) indicate how long to vibrate and the odd indices indicate how long to pause. For example, [300, 100, 400] would vibrate 300ms, pause 100ms, then vibrate 400ms.