Integrating Web Notifications API with Stream Chat

Nowadays, there are many applications that notify users of important messages related to their application by sending out notifications – this can be via push or web notifications. With a web notification, a user can click on the notification and immediately go to the application to continue working on that piece of content.
With Stream Chat apps, an instance can send notifications when a new message arrives, like Slack, WhatsApp, Facebook message, etc.

In this article, you will learn how to use the Web Notifications API – a feature of the web – to display notifications when a message arrives in your application.

demo:

Preparing for the project

We will do an example with a React project. To do this, you will have to clone one Simple Project React from Github. This project accompanies tutorials Build a chat application interface with React and Stream Chat. Open a command-line application and parse the following line into your terminal:

Using the Notifications API

The command you just ran downloads the project and installs the required dependencies to run the app. We will be adding tweaks to the app so that users are notified when new messages arrive. The first thing we need to do to use the API properly is to request consent from the user to allow our application to send system messages from the browser.
By requesting consent, the Notifications API will allow the user to control what the application is allowed to display, as well as what is not. Once a selection has been made, the settings generally persist for the current and future session.

Ask for approval

API Notify show a model requestPermission() is required to request consent to display the message to the user. We will ask for approval when the application is loaded.
Open the project in your favorite IDE and open the file src/App.js.
Then add the below code to the class:

In the above code, we have added a method named askNotificationPermission() which is called when the component is mounted.
Method askNotificationPermission() first check if browser supports Notification API. If yes, it calls checkNotificationPromise() to check if the browser supports the promise-based version of Notification.requestPermission() or not, and based on this result, it will call one of two: promised-based API version or callback-based version.
When a user responds to the consent request, we call the handlePermission(permission) which will explicitly set the value of Notification.permission because older versions of Chrome don’t do this automatically.
We mentioned that we have to check to see if the browser supports the promise-based version of Notification.requestPermission(). We did this with one call to the `this.checkNotificationPromission() method. Let’s add a definition for this method:

What this method does is call the method .then() in Notification.requestPermission() and then return true if it doesn’t throw an error, or return false if it does.

Show notifications

A message is displayed when we call instance Notification by constructor. Constructor must be passed one argument title, and can choose to pass more objects options to categorize options as text direction, body text, and more.
Let’s create a method that will be responsible for this and call this in the method onNewMessage.
Add a method named createNotification:

This method accepts messages as arguments. It calls constructor Notification() with a text message header as the body of the message.
Now we will call this method inside method onNewMessage. Add the following code after line 77

With the code just added, the notification will only be generated if the author of the recent prompt has not logged in the user.

Putting it all together

Let’s see how this works in the browser. We will be running the React application, but we also need an API to generate user access tokens for the Stream Chat client. We will use the project that you can find on Github. Follow the instructions in the README file to install and start the application. Once it has been started, start the React application by running yarn start in the command line.
demo

Kết thúc

Done! You already know how to use the Notifications API to display notifications. To use this API, you first need to get consent from the user by calling Notification.requestPermission() and then generate message using constructor Notification(), pass and title and options object.

The code of this tutorial is 100% open source and available on Github he he