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.

Browser	Desktop	Mobile
Chrome 42+	Yes	Android Only
Edge 17+	Yes	No
Firefox 44+	Yes	Android Only
Samsung Browser	No	Android Only
Safari	No	Not possible

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.

Method	Description
isWebPushSupported	Determines if web push is supported by the user's browser. Returns a boolean of True or False.
isWebPushSubscribed	Determines if the user is subscribed for web push. Returns a boolean of True or False.
registerForWebPush	Registers the user's browser for web push.
unregisterFromWebPush	Unsubscribes the user and removes the push token. (Does not unregister the service worker registration.)

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

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.

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.