WebPush

Integration Steps

1. Integration of SuprSendProvider

Please follow this guide to integrate SuprSendProvider in your application. Pass vapidKey prop to SuprSendProvider. You can find it in SuprSendDashboard --> Vendors --> WebPush.

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. If you want to customise this default service worker file name serviceworker.js to other file, pass swFileName prop to SuprSendProvider. Add below lines of code in that service worker file and replace YOUR_PUBLIC_API_KEY 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(YOUR_PUBLIC_API_KEY); // replace publicApiKey with your value

3. Accessing webpush methods using useSuprSendClient hook

All available webpush methods can be accessed using SuprSend client instance. You can get the SuprSend client instance using useSuprSendClient hook.

4. 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.