Notifications like Facebook and WhatsApp web

notification

Notifications allow us to display information to the user when our web system fires an action or event.

Sometimes in our systems, we commonly use custom alerts to display information, however, these are visible only when the user has opened the tab. To give a solution HTML5 Notification API gives us the tools to display desktop notifications, which are visible even when we have minimized the browser.

How start using Notification?

First of all, we need to know the Notification structure, it consists of an icon, title, and body.

To create a new Notification we need to call the constructor:

let notification = new Notification("Hi! I’m a notification");

In this example, we send a text as a parameter which is taken as a title. If we want to display a message and icon we need to send an object as in the following example:

let notification = new Notification(
    "I’m the Title",
    {
        body: "I’m the Message",
        icon: Image
    }
);
 

The Notification object has the read-only parameter permission. This parameter is a string that represents the current permission to display notifications. To check the current value of the permission we need to write Notification.permission on the navigator console and when we press enter we can find one of three possible results:

  • default – initial value
  • granted – notifications are allowed on this web page
  • denied – notifications are not allowed

It is important to know that the user can decide to allow the web site to show or not notifications. To ask the user we use the property requestPermission, this is a function that receives another function as a parameter.

Notification.requestPermission(function (permission) {
    if (permission === "granted") {
        let n = new Notification("hey! this is a notification");
    }
    if (permission === "denied") {
        alert("you're missing notifications");
    }
});
 

when you run that code the browser shows you an alert like this, only if your Notification.permission current value is “default

But, if you have denied notification you will see an alert with this message you’re missing notifications instead of de above alert.

If you click allow or Notification.permission current value is “granted” you will see this notification

To make more beautiful notifications we can code a notification generator like this

const GenerateNotification = (title, body, icon) => {
    let options = {
        body,
        icon
    }
    let notification = new Notification(title, options);
}
 

In the icon parameter, you can send an URL image as a string like this

GenerateNotification(
    "This is important", 
    "please click this notification", 
    'https://176g4u2eqkgm30b0371yje33-wpengine.netdna-ssl.com/wp-content/uploads/2018/04/image-11.png')
 

Now you can start playing around with notifications. This API is works across platforms but you can see browser compatibility here.

You can check the official documentation here.

Claudia Andrade

Claudia Andrade

Leave a Replay

Join our mailing list

Get the latest articles written by our team.