Web notifications API was designed to display END user notifications(desktop notifications), which allows alerting the user outside the context of a web page. This API is really very useful to show real time notifications like new email notifications, new tweet notification, new message notification ..etc, but the only thing we need to remember is the user interface of this notifications are not consistent, UI may very depending on the browser(FF,Google Chore..etc) and devices.

Here we are going to create the Notification object and using this object we will configure and display desktop notifications to the user.

Before writing some code, first run the feature detection test with if(window.Notification){ } .

Syntax :

Here :
title : The title that must be shown within the notification
options : An object that allows to configure the notification. It can have the following properties:

dir : The direction of the notification; it can be auto, ltr, or rtl
lang: Specify the lang used within the notification. This string must be a valid BCP 47 language tag.
body: A string representing an extra content to display within the notification
tag: An ID for a given notification that allows to retrieve, replace or remove it if necessary
icon: The URL of an image to be used as an icon by the notification

Example :

Description of above lines:
1. Test Notification API browser support.
2. Request notification access from the user.
3. If the user allow to access notification API, the status comes back as granted.
4. If Status is granted create new notification object and pass title and options object to it.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.