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.

Step 1: Generate WebPush Credentials

To send web push notifications, VAPID credentials are required according to specification. 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 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 Growlytics.initialize() method. An example is given below.

// Initialize Growlytics
Growlytics.initialize({
    
    // Configure push notifications, For more details, visit https://docs.growlytics.in/channels/web-push-notifications
    webPushEnabled: true, // Enable/disable web push module, disabled if not provided
    // Fully qualified URL of service worker file
    serviceWorkerFile: 'service worker file location', 
    // Ask for notification permission at page load, enabled if not provided
    autoRequestWebPushPermission: true 
});

Step 3: Requesting User Permissions

If you disabled auto permission request at page load, you can also use requestNotificationPermission() method anytime to ask for notification permission. An example is given below.

Growlytics.requestNotificationPermission();

With above integration steps, you should be able to send push notification to users using Growlytics campaigns.

Additional Notes

Payload structure of web push notification sent from Growlytics will have following structure.