---
name: event-notifications-en-push-chrome
title: Creating and sending push notifications to Chrome web by using Event Notifications
description: Create an Event Notifications service, add a push destination for Chrome Push Notifications, and send messages to Chrome web devices.
last-updated: 2024-10-17
---

> ## Documentation Index
> The table of contents for this documentation set is at https://cloud.ibm.com/docs/event-notifications?format=markdown
> The index for all IBM Cloud docs is at: https://cloud.ibm.com/docs/llms.txt
> Use these files to discover more information as needed.

# Creating and sending push notifications to Chrome web by using Event Notifications
{: #en-push-chrome}

Create an Event Notifications service, add a push destination for Chrome Push Notifications, and send messages to Chrome web devices.
{: shortdesc}

## What is Event Notifications?
{: #en-what-is-chrome}

Event Notifications is an event notification routing service that informs you about 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 Chrome web Push Notifications?
{: #en-how-clients-send-chrome}

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

![How clients use push notifications](images/en-how-send-chrome.svg "How clients use push notifications"){: caption="How clients use push notifications" caption-side="bottom"}

## Objectives
{: #en-objectives-chrome}

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

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

## Before you begin
{: #en-before-begin-chrome}

You must have the following prerequisites in place:

* Download and install any code editor to create website code by using HTML, CSS, and JavaScript.
* A Google account to log in to Firebase console to get your Sender ID and Server API Key.
* An IBM Cloud account. If you do not have one, [create an IBM Cloud account](https://cloud.ibm.com/){: external}.

## Create an Event Notifications service instance
{: #en-create-event-chrome}
{: step}

* Log in to your [IBM Cloud account](https://cloud.ibm.com/){: external}.
* In the [IBM Cloud catalog](https://cloud.ibm.com/catalog#services), 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**.

## Get FCM credentials
{: #en-get-fcm-chrome}
{: step}

Firebase Cloud Messaging (FCM) is the gateway that delivers push notifications to Chrome web devices. To set up the Chrome web Push destination on the console, you must get your FCM credentials (Server key). The server key is stored securely and used by the Event Notifications service to connect to the FCM server.

* Go to the [Firebase Console](https://console.firebase.google.com/?pli=1){: external}. A Google user account is required.
* Click **Create a project**. If you already have a project, then click **Add Project**.
* In the **Create a project** window, enter a project name, accept the terms, and enable or disable Google analytics (optional) by selecting the toggle switch, then click **Continue**.
* If Google analytics is enabled, then in the **Configure Google Analytics** window, choose the **Analytics location**, and accept the terms.
* Click **Create Project**.
* Click **Continue** when the new project is ready.
* In the navigation panel, select the **settings** icon next to the **Project Overview** and select **Settings** > **Project settings**.
* Click the **Cloud Messaging** tab to view your project credentials: **Server Key**.

![FCM credentials](images/en-fcm-credentials.png "FCM credentials"){: caption="FCM credentials" caption-side="bottom"}

## Add a generic API source
{: #en-add-gen-api-chrome}
{: step}

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
{: #en-create-dest-chrome}
{: step}

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 **Chrome Push Notifications** type from the dropdown list.
* Select a destination plan: Pre-production destination or Production destination.
   - **Pre-production destination** - select this destination as a 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.
* Add your website URL to allowlist it.
* Add the **Server Key**, which you got from **Get FCM credentials** section.
* Click **Create destination**.
* When the Chrome destination is created, edit the destination to get the public vapID key required for the web SDK.

![Destination Edit](images/en-push-chrome-destination-edit.png "Destination Edit"){: caption="Receive notifications" caption-side="bottom"}

![Destination](images/en-push-chrome-destination.png "Destination"){: caption="Receive notifications" caption-side="bottom"}

## Create an Event Notifications topic
{: #en-create-topic-chrome}
{: step}

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](https://www.rfc-editor.org/rfc/rfc9535.html). Jsonpath expressions can be validated at [jsonpath.com](https://jsonpath.com) or [extendsclass.com](https://extendsclass.com/jsonpath-tester.html).

## Create an Event Notifications subscription
{: #en-create-sub-chrome}
{: step}

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 Chrome web SDK
{: #en-setup-chrome-sdk}
{: step}

The Chrome web SDK enables Chrome websites to receive push notifications. Complete the following steps to install Event Notifications Chrome 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.

   ```js
   {
      "name": "YOUR_WEBSITE_NAME"
   }
   ```
   {: codeblock}

* Change the `manifest_Website.json` file name to `manifest.json`.

* Include the `manifest.json` in the `<head>` tag of your HTML file.

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

* Include IBM Cloud web push SDK to the script.

   ```html
   <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.

   ```js
   var enPush = new ENPush()

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

   var initParams = {
      "instanceGUID": "<instance_guid>",
      "apikey": "<instance_apikey>",
      "region": "<region>",
      "deviceId": "<YOUR_DEVICE_ID>",
      "chromeDestinationId": "<chrome_destination_id>",
      "chromeApplicationServerKey": "<Chrome_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 Event Notifications service. Choose either of the following options:

   * Register without `UserId`:

      ```js
      enPush.register(function(response) {
         alert(response.response)
      })
      ```

   * Register with `userId`. For `userId`-based notification, the register method accepts one more parameter - `userId`.

      ```js
      enPush.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.

   ```js
   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 Chrome web device
{: #en-send-notifications-chrome}
{: step}

Use the [Send notification API](https://cloud.ibm.com/apidocs/event-notifications) to send the push notification for the Chrome web device. You can use the [Node](https://github.com/IBM/event-notifications-node-admin-sdk#send-notifications){: external}, [Go](https://github.com/IBM/event-notifications-go-admin-sdk#send-notifications){: external}, [Python](https://github.com/IBM/event-notifications-python-admin-sdk){: external} or [Java](https://github.com/IBM/event-notifications-java-admin-sdk){: external} admin SDK instead of calling the API directly.

Received notification on the Chrome website in macOS.

![Receive notifications](images/en-receive-chrome-notification.png "Receive notifications"){: caption="Receive notifications" caption-side="bottom"}