Creating and sending push notifications to Firefox web by using Event Notifications

Create an Event Notifications service, add a push destination for Firefox, and send messages to Firefox web devices.

What is Event Notifications?

Event Notifications is an event notification routing service that notifies you of critical events that occur in your IBM Cloud account or triggers automated actions by using webhooks. You can filter and route event notifications from IBM Cloud services like Availability Monitoring, to email, SMS, push notifications, and webhooks.

How do clients use Firefox web push notifications?

The following diagram shows you how clients use Firefox web Push Notifications.

Objectives

This tutorial shows you how to send push notifications as follows:

Create a website with Event Notifications.
Get Firefox web credentials.
Download the SDK and complete the notifications setup.
Configure and send Firefox web Push Notifications to a browser.

Create an Event Notifications service instance

Log in to your IBM Cloud account.
In the IBM Cloud catalog, search Event Notifications > Event Notifications.
Select a Region from the list of supported regions and select a pricing plan.
Provide a Service name.
Select a resource group.
Accept the licensing agreements and terms by clicking the checkbox.
Click Create.

Add a generic API source

To create a generic API source:

Click Sources in the Event Notifications instance.
Click Create and select an API Source in the Create source dialog.
Type a name and an optional description and click Create source.

Create an Event Notifications destination

Click Destinations in the Event Notifications instance and click Create.

Enter the following destination details in the Create destination dialog.

Name: add a name for the Destination.
Description: add an optional description for the destination.
Type: select Firefox Push Notifications type from the dropdown list.
Select a destination plan: Pre-production destination or Production destination.
- Pre-production destination - select this destination as low-cost push destination, for your development and test environments.
- Production destination - use the full capability of this destination. Unlimited devices and outbound messages allowed.
Provide the URL of your website.
Click Create destination.
After the Firefox destination is created, edit the destination to get the public vapID key required for the web SDK.

Destination Edit — Receive notifications

Create an Event Notifications topic

Click Topics in the Event Notifications instance and click Create. Enter the following topic and filter details in the Topic details and Event filters steps:

Name: enter a name for the topic.
Description: add an optional description for the topic.
Source: select a source from the dropdown list.
Event type: select event type from the dropdown list.
Event sub type: select event sub type from the event sub type dropdown list.
Severity: select severity from the severity dropdown list.
Advanced conditions: write your own custom conditions, which must follow jsonpath specifications. Jsonpath expressions can be validated at jsonpath.com or extendsclass.com.

Create an Event Notifications subscription

Proceed to the Subscriptions step. Click Create and enter the following subscription details in the Create subscription dialog.

Subscription name: enter a name for the subscription.
Destination type: select destination type.
Destination: select destination.

Click Create subscription.

Set up Event Notifications Firefox web SDK

The Firefox web SDK enables Firefox websites to receive push notifications. Complete the following steps to install Event Notifications Firefox web SDK, initialize the SDK, and register for notifications for your website.

To include the SDK in your project, add the ENPushSDK.js,ENPushServiceWorker.js and manifest_Website.json files to your project root folder.
Edit the manifest_Website.json file.
```
{
   "name": "YOUR_WEBSITE_NAME"
}
```
Change the manifest_Website.json file name to manifest.json.

Include the manifest.json in the <head> tag of your html file.

<link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">

Include IBM Cloud web push SDK to the script.

<script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>

Complete the following steps to enable the website to initialize the SDK.

var enPush = new ENPush()

function callback(response) {
   alert(response.response)
}

var initParams = {
   "instanceGUID": "<instance_guid>",
   "apikey": "<instance_apikey>",
   "region": "<region>",
   "deviceId": "<YOUR_DEVICE_ID>",
   "firefoxDestinationId": "<firefox_destination_id>",
   "firefoxApplicationServerKey": "<Firefox_VapId_public_key>"
}

enPush.initialize(initParams, callback)

region: Region of the Event Notifications instance. For example, us-south, eu-gb, au-syd, eu-de, or eu-es.
deviceId: Optional deviceId for device registration.

To register for notifications, use the register() or registerWithUserId() API to register the device with IBM Cloud Event Notifications service. Choose either of the following options:
- Register without UserId:
```
enPush.register(function(response) {
   alert(response.response)
})
```
- Register with UserId. For userId-based notification, the register method accepts one more parameter - userId.
```
bmsPush.registerWithUserId("UserId",function(response) {
   alert(response.response)
})
```
  UserId is the user identifier value with which you want to register devices in the push service instance.
The subscribe API subscribes the device for a tag. After the device is subscribed to a particular tag, the device can receive notifications that are sent for that tag. Add the following code snippet to your web application to subscribe to a list of tags.
```
enPush.subscribe(tagName, function(response) {
   alert(response.response)
})
```
When the setup is complete, run your application and register for push notifications.

Send notifications to the Firefox device

Use the Send Notification API to send the push notification for the Firefox device. You can use the Node or Go admin SDK instead of calling the API directly.