WebPush notifications only work over https. Most browsers allow push to work in localhost also for development purposes.

​
Prerequisites

​
Integration Steps

1

Configuration

While creating SuprSend instance you have to pass vapidKey (get it in SuprSend Dashboard —> Vendors —> WebPush).

If you want to have custom serviceworker file name instead of serviceworker.js(mentioned in step2), you can pass name of it in swFileName.

new SuprSend(publicApiKey: string, {vapidKey?: string, swFileName?: string})
2

Add ServiceWorker file

Service worker file is the background worker script which handles push notifications.

Create serviceworker.js file such that it should be publicly accessible from https://<your_domain>/serviceworker.js. Add below lines of code in that file and replace publicApiKey with key you find in API Keys page in SuprSend Dashboard.

importScripts('https://cdn.jsdelivr.net/npm/@suprsend/web-sdk@2.0.0/public/serviceworker.min.js');
initSuprSend(publicApiKey);
3

Register Push

Call registerPush in your code, which will perform following tasks:

  • Ask for notification permission.

  • Register push service and generate webpush token.

  • Send webpush token to SuprSend.

const response = await suprSendClient.webpush.registerPush();

Returns: Promise<ApiResponse>

NOTE: This method should be called on user action like button click for better UX, don’t call this on page load.

​
Other available methods

​
Check for permission

To check if user has enabled notifications permission use method provided by library

suprSendClient.webpush.notificationPermission():

This will return a string representing the current permission. The value can be:

granted: The user has granted permission for the current origin to display notifications.

denied: The user has denied permission for the current origin to display notifications.

default: The user’s decision is unknown. This will be permission when user first lands on website.

Was this page helpful?