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.
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:
1 2 |
git clone https://github.com/pmbanugo/react-conversational-ui-tutorial.git && cd react-conversational-ui-tutorial && yarn install |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">askNotificationPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function-variable function">askNotificationPermission</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// check if the browser supports notifications</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"Notification"</span> <span class="token keyword">in</span> window<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkNotificationPromise</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> permission <span class="token operator">=</span> <span class="token keyword">await</span> Notification<span class="token punctuation">.</span><span class="token function">requestPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePermission</span><span class="token punctuation">(</span>permission<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">.</span><span class="token function">requestPermission</span><span class="token punctuation">(</span><span class="token parameter">permission</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePermission</span><span class="token punctuation">(</span>permission<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This browser does not support notifications."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function-variable function">handlePermission</span> <span class="token operator">=</span> <span class="token parameter">permission</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token string">"permission"</span> <span class="token keyword">in</span> Notification<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">.</span>permission <span class="token operator">=</span> permission<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
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:
1 2 3 4 5 6 7 8 9 10 |
<span class="token function">checkNotificationPromise</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">.</span><span class="token function">requestPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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
:
1 2 3 4 5 6 |
<span class="token function">createNotification</span><span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Notification</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>message<span class="token punctuation">.</span>author<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> sent a message</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> body<span class="token operator">:</span> message<span class="token punctuation">.</span>text <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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
1 2 3 4 |
<span class="token keyword">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>author<span class="token punctuation">.</span>id <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">createNotification</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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