JavaScript push notifications

Leanplum supports web push notifications in our Web (JavaScript) SDK. You will need to contact your CSM to activate this feature.

Supported browsers

Web Push is an experimental technology supported in the following browsers. Before implementing, review to ensure you are familiar.

Web Push Methods

We have included four public methods in our Web (JavaScript) SDK to support web push. You can see each below and how you can use them in your application.

These can be used to prompt the user to register for web push. We have provided a sample implementation where a toggle registers and unregisters a user for web push.

Specifically, see implementation for toggle initialization and toggle switching.

Enabling Web Push

To enable web push, you first need to include the Service Worker file in your root directory and register it in your code, so the browser can use it to run the necessary background processes.

Our SDK has a method that handles the Service Worker registration for you. Pass the filepath to registerForWebPush. The Leanplum SDK also includes a fully working sw.min.js file that you can use as your Worker.

Before registering the device for push, we recommend checking that the device and browser support web push, and that the device has not already been registered. You can do this with isWebPushSupported and isWebPushSubscribed, both of which return a boolean.

🚧

For security reasons, service workers only run over HTTPS.

import leanplum from `leanplum-sdk`

let isSubscribedToWebPush = false;
let isWebPushSupported = leanplum.isWebPushSupported();
if(isWebPushSupported){
  leanplum.isWebPushSubscribed().then(subscriptionStatus => {
      isSubscribedToWebPush = subscriptionStatus;
  });
}

//Once validated, you can register the device for push:
if(isWebPushSupported && !isSubscribedToWebPush){
  // Register by passing SW filepath (which is in our root directory).
  leanplum.registerForWebPush('/sw.min.js').then(subscriptionStatus => {
    console.log('Subscription status: %s', subscriptionStatus);
  });
}

After successfully registering the device, you will be able to receive web push notifications. The browser will handle the displaying of the messages. Notifications will include the title, message and icon. For now only Chrome and Edge includes support for push images (in beta).

You can customize how your notification is displayed via the showNotification function.

❗️

Web Message Requirements

1. The Title from the Leanplum dashboard is required to be filled. If the push notification does not include a title, the showNotification function will drop the push on the SDK side.
2. Open URL is the only supported web push action. The Web SDK will ignore any other actions.

For more information on sending a web push from Leanplum, see how to Send a web push notification.