Service Worker Instructions

Service workers play a crucial role in delivering mobile-app-like features to websites.

They are necessary for enabling web push notifications, and Hood provides its own service worker implementation for this purpose.

However, web applications can only use one service worker at a time.

This guide explains how to integrate Ocamba's solution if your website already uses its own service worker.

Step 1. Specify the Path to Your Service Worker

There are 3 ways to define the path to your service worker file.

1. Using the Web Settings Page

Navigate to Hood > Tags Manager > List of all tags and choose a specific tag.

Then, click on the Configure button in the top right corner of the

Configure Tag Button Location

Scroll down to the Push settings, and here is where you can edit the Custom Service Worker Path.

Provide the URL of your service worker.

Custom Service Worker Path Location

1. Through Init in Your Code

In your code, modify the initialization call as follows.

Ocamba.push(["init", {
  webKey: "YOUR_WEBKEY",
  serviceWorkerUrl: '/sw.js', // Adjust to the actual path of your 
  service worker
  // … additional initialization options
}]);

Update /sw.js to reflect the correct relative path to your service worker, starting from your website's root.

3. Manually Create a Service Worker

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

importScripts(\"https://cdn.ocmhood.com/sdk/osw.js\");

Step 2. Incorporate the Hood Service Worker in Your File

In your existing service worker file, update the initialization code to include your YOUR_WEBKEY and add the following at the beginning of the file:

importScripts(\'https://cdn.ocamba.com/sdk/1.1/ocamba-loader.min.js\');

Ocamba = self.Ocamba \|\| \[\];

Ocamba.push(\[\'init\', {

webKey: \"YOUR_WEBKEY\",

}\]);

Replace YOUR_WEBKEY with your actual key for the Ocamba platform.

Using Workbox for Service Worker Generation

When using Workbox, add to the ‘generateSW’ step:

 importScripts: \[\"./ocamba-worker-loader.min.js\"\] 

Step 3. Test Your Integration

To confirm that your push notification integration is functioning correctly, subscribe to push notifications and verify their delivery.

Customizing Your Service Worker Integration

If your setup requires particular adjustments, please follow these steps:

• 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 for Custom Code Setup, set up your initialization call as follows:

Hood(\'init\',\'YOUR_API_KEY\', {

push: \'YOUR_PUBLIC_PUSH_TOKEN\',

serviceWorkerFile: \'/my_sub_dir/worker.js\',

serviceWorkerScope: \'/my_sub_dir/\'

})

An 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, 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

Example:

function myPushStatus(status){

console.log(status);

}

Hood(‘getPushStatus’, myPushStatus)

Events

Ocamba.Hood events are accessed via event call.

Example:

Hood(’event’,‘EVENT_NAME’, callback);

Example

function myOnPushAllow(){

console.log(‘visitor allowed push’);

}

Hood(’event’,‘onPushAllow’, myOnPushAllow);

Notification Object

Notification Options Object