Skip to main content
Version: 1.3.x

Default Web Push Provider

Engagespot supports web push (or browser push notifications) via our own provider out of the box, to notify your users even if they are not currently on your web app!

caution

Webpush channel will work only if you have configured the in-app channel and installed the in-app component in your web app.

Enabling Default Web Push Provider​

To enable default web push provider, login to your Engagespot dashboard, goto Channels -> Web Push and enable Default Provider.

info

Web push notifications are only compatible with websites that have HTTPS enabled, except for when the website is hosted locally (localhost).

Adding a Service Worker to Your Web App​

To enable default web push provider, you need to setup Service Worker on your web app. Don't worry if you haven't heard of it before. We've made it really simple for you.

In your web application's root public folder (In case of React.js, it's the public folder), create a new file called service-worker.js.

Copy the following line to the file, and save it.

importScripts('https://cdn.engagespot.co/serviceWorkerv2.js');

For Bubble platform users​

If you're setting up web push notifications in Bubble, read this guide instead.

Verifying the service-worker installation​

To verify if you've properly placed this file, goto https://yourApp.com/service-worker.js and see if the file can be accessed.

caution

If your service worker file is not accessible at https://yourApp.com/service-worker.js, then web push notifications will not work!

Turn ON Web Push Channel in Your Dashboard​

Now goto your Engagespot dashboard and navigate to Channels menu. Turn ON the web push channel. Now you've enabled web push on your app and your user's can subscribe by opening the settings page on the notification widget.

Advanced Setup - Using Existing Service Worker​

If you already have a service worker registered in your application, you shouldn't try to add a new file for Engagespot. Only one service worker file is supported per domain. But you can do a slightly different configuration.

Import Engagespot Service Worker in your existing Service Worker file.​

Open your existing service worker file and copy the following line to the top section.

importScripts('https://cdn.engagespot.co/serviceWorkerv2.js');

// Rest of your service worker content goes here...

Initializing Engagespot Front-end SDK with your existing service worker registration.​

Since you already have a service worker file, you should have registered it in your app through the window.navigator.serviceWorker.ready function. You just need to pass that registration context to Engagespot so the SDK will use it instead of trying to register a new service worker.

Here is how you can do it in our core Javascript SDK

window.navigator.serviceWorker.ready.then(swRegistration =>
  const engagespotClient = new Engagespot('YOUR_API_KEY',{
      userId:'yourUser@example.com',
      serviceWorkerRegistration:swRegistration
  })
)

Done!