WebPush

Prerequisites

• Integration of Javascript SDK

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

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/[email protected]/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.