Sending web push notifications from Novu notification center

Novu is an open-source notification infrastructure for developers.

It allows to build a notification center on your website and it is also a central place to send notifications over multiple channels (email, sms, push, etc.).

For example:

• it allows to choose the channel based on some conditions (e.g. if the user is online, deliver the notification directly inside the website, otherwise send a push notification)
• it allows to aggregate multiple events together (e.g. if a user received many likes on a post, you can group them and send less notifications).

In this tutorial we'll see how to use Pushpad as a web push provider for Novu.

We assume that you already have a Novu account or you have installed the open source version on your servers.

Configure a provider for web push

First we need to add the Pushpad push provider to Novu.

1. In the Novu dashboard, click "Configure Push"
2. Select "Pushpad" and the environment (development or production)
3. Finish the configuration by adding an "Auth Token" (go to your Pushpad account -> Access Tokens to create a new token) and a "Project ID" (go to your Pushpad project -> Settings to find it)
4. Activate the Pushpad provider inside Novu (click the "Active" toggle and save).

Build a notification workflow

1. In the navigation go to "Workflows" and click "Build a workflow"
2. Give it a name (e.g. "My event")
3. Click the "+" icon in the workflow below the "Workflow trigger" and select "Push"
4. Click on the new "Push" step and add a "Push message title" and "Push message content"
5. Click "Update" to save the workflow.

Usually you will also add other steps for the delivery of the notification by other means (e.g. website notification center, email, SMS, etc.).

Associate the Pushpad push subscriptions to the Novu subscriber

For each Novu subscriber, you need to associate some push subscriptions: in this way, whenever Novu needs to send a push message, it can contact Pushpad and ask to send a notification to a specific user.

If you don't complete this step, Novu doesn't know how to contact Pushpad and you will get an error ("Subscriber does not have a configured channel").

In order to associate a Novu subscriber to a Pushpad user, you can use this code:

import { Novu, PushProviderIdEnum } from '@novu/node';

const novu = new Novu("NOVU_API_KEY");

let novuSubscriberId = 'SUBSCRIBER_ID';
let pushpadUserId = 'USER_ID';

await novu.subscribers.setCredentials(novuSubscriberId, PushProviderIdEnum.Pushpad, {
  deviceTokens: [pushpadUserId],
});

You need to replace the following values:

• NOVU_API_KEY can be found in Settings -> API Keys (in the Novu dashboard)
• SUBSCRIBER_ID can be found from code or from Subscribers in the Novu dashboard
• USER_ID is the user ID (uid) that you are using in Pushpad for that user.

Now when you trigger a workflow for SUBSCRIBER_ID, Novu will send the push notifications (defined in the workflow) to USER_ID using Pushpad.

In Pushpad, you can set the user ID (uid) for a browser using the JavaScript SDK. For example:

// assign USER_ID to the current browser
pushpad('uid', 'USER_ID');

// subscribe to push notifications
pushpad('subscribe');

Run the workflow

Let's test the new workflow.

1. Open the workflow that you have created in the previous steps
2. Select the trigger and click "Run Trigger" (in the "Run a Test" tab)
3. The workflow should be completed successfully within a few seconds (you should see "Success! Message sent")
4. Click "Show details" to get the Pushpad notification ID.

Now you can also check that the message is delivered to Pushpad using the Pushpad dashboard:

1. Go to Pushpad and open the project
2. Click "Notifications"
3. See the recent notifications or search the notification by ID (the ID that you got in the previous step)
4. In the notification details you can see that the recipient is USER_ID and you can also see the delivery status.

Done! If the user is subscribed to web push, he will receive a push notification immediately, otherwise the request is simply ignored.

This was just a test run of the workflow. Now that it works you can trigger it from code:

novu.trigger('my-event', { to: { subscriberId: 'SUBSCRIBER_ID' }, payload: {} });