Web Push Notifications

This section will cover how you can setup Web Push as a channel on Growlytics. Before you start, make sure you've integrated the Browser SDK, setup will not work otherwise.
Supported browsers are: Chrome, Firefox, Microsoft Edge, and Opera
Step 1: Generate WebPush Credentials
To send web push notifications, VAPID credentials are required according to specifications. Growlytics takes care of generating credentials for you. But if you already have used credentials elsewhere, you can configure the same credentials.
Login to Growlytics dashboard.
At the top right corner, click on Integrations  > Web Push Notification
Click on Generate VAPID keys if you don't already have the keys else you can provide the VAPID public and private keys in input box.
Click on save changes.
Step 2: Configure Browser Sdk
Web Push requires service worker to be registered.  
Add service worker script in your project. You can use Growlytics provided service worker template or if you already have service worker implemented in your project you can add Growlytics's service worker script.
Download service worker file from here. Add this service worker file at root of your project with any name  like growlytics-sw.js. 
Once, you have added service worker file in your project, inform Growlytics to use that service worker file by providing URL of that file against  serviceWorkerFileattribute at growlyticsSettings variable which is being used in the Growlytics script. An example is given below.  
1
// Initialize Growlytics
2
let growlyticsSettings = {
3
    
4
    //.... Other Growlytics Settings
5
    
6
    // Configure push notifications, For more details, visit https://docs.growlytics.in/channels/web-push-notifications
7
    webPushEnabled: true, // Enable/disable web push module, disabled if not provided
8
    // Fully qualified URL of service worker file
9
    serviceWorkerFile: 'service worker file location'
10
};
Copied!
Also make sure webPushEnabled flag is set to true in growlyticsSettingsvariable being passed to Growlytics script.
Step 3: Requesting User Permissions
If you have disabled auto-request permission at page load from dashboard, you can also use requestNotificationPermission()method anytime to ask for notification permission. An example is given below.
1
Growlytics.requestNotificationPermission();
Copied!
With the above integration steps, you should be able to send push notifications to users using Growlytics campaigns.
Additional Notes
Payload structure of web push notification sent from Growlytics will have following structure.
Key
Data Type
Description
glytcs_pnf
boolean
If this field is present, means notification is received from Growlytics.
glytcs_id
string
Notification tracking id used by Growlytics.
glytcs_icn
string
Url of an notification icon. If given, this URL will be used to show small application in notification.
glytcs_img
string
Url of an notification Image. If given, this URL will be used to show large image in notification.
glytcs_tl
string
Notification title, must be present or app name will be used as title. 
glytcs_msg
string
Notification body, must be present, if not provided, notification will not be shown.
glytcs_dl
string
If present, this is a deep link that must be followed at the time of notification open.

Channel Integrations - Previous

Mobile Push Notifications

Next - Channel Integrations

Ad Network (Coming Soon)

Last modified 7mo ago

Copy link

Contents

Step 1: Generate WebPush Credentials

Step 2: Configure Browser Sdk

Step 3: Requesting User Permissions

Additional Notes