Custom serviceworker with both client and Notix content

You can use custom serviceworker for own purposes mixing it with Notix content.

Step 1: Create your own serviceworker mixing own and Notix content

• Put all code that is required for your purposes into serviceworker file
• After this import Notix serviceworker
• Do not forget to set appId parameter from Notix SSP with following line
  self.options = {"appId": "YOUR-APP-ID-HERE"}
• Save this file with any filename you like, in this example is used /static/notix-custom-serviceworker.js filename

// This is example of code that is not related to Notix functionality
// Serviceworker code provided by Notix client
self.addEventListener('push', (event) => {
    console.log("External push event", event)
});

self.addEventListener('fetch', (event) => {
    console.log("External fetch event", event)
});

self.addEventListener('notificationclick', (event) => {
    console.log("External notificationclick event", event)
});
// End of serviceworker code provided by Notix client


// Notix serviceworker import
// IMPORTANT: Use your own "appId" from Notix SSP
self.options = {"appId": "YOUR-APP-ID-HERE"}
importScripts("https://notix.io/ent/current/enot.sw.min.js");

Step 2: Register your serviceworker in the way you like

This registration is performed by you own, at any time you want.

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/notix-custom-serviceworker.js')
}

Step 3: Setup Notix tag that should be located on web pages where you use will collect subscribers

For correct subscription process

• Set installFromSw to false
• Set correct serviceworker name that you've used in «Step 1»

sdk.startInstall({
    appId: "YOUR-APP-ID-HERE",
    installFromSw: false,
    sw: {
        url: '/notix-custom-serviceworker.js'
    }
})

Whole javascript tag on your web pages can look like this

// This is not part of Notix code
// Just example of external serviceworker registration provided by website owner
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/notix-custom-serviceworker.js')
}

// Regular Notix tag
const s = document.createElement("script")
s.src = "https://notix.io/ent/current/enot.min.js"
s.onload = (sdk) => {
    sdk.startInstall({
        appId: "YOUR-APP-ID-HERE",
        installFromSw: false,
        step0: "waitClick",
        clickSelector: "#sample-click-button",
        sw: {
            url: '/notix-custom-serviceworker.js'
        }
    })
}
document.head.append(s)

Example

Clicking on the button below will trigger permission prompt for push notifications. Serviceworker is already registered on this page.

Click for subscribe