Examples Download

Notifications are a fundamental part of any system or website, through which messages, feedback, errors, warnings or any other information about data or process states are displayed to users.

In HTML5 we can use the Notification object to configure and display informational messages to the user; the syntax to create a notification is as follows:

var notification = new Notification(titulo, {opciones})

Basic notification in JavaScript

The easiest notification to configure is the one in which only its title is present; in other words:

var notification = new Notification("Hola Mundo")

We obtain:

Click on the following button to launch the basic notification:

¡Lanzar notificación básica!

Check notifications API support in the browser

We can use the following conditional to verify support in the browser:

if (!('Notification' in window)) {
		// el navegador no soporta la API de notificaciones
                        alert('Su navegador no soporta la API de Notificaciones :(');
                        return;
                    }

Customizing notifications

It is possible to customize to a greater degree than simply placing a title in the notifications through the second optional parameter that allows you to configure a set of options that we will see below:

JavaScript Notification Parameters

title: Main message or title that will be displayed in the notification.

options: (optional)

• body: Text with some extra content to display.
• dir: Indicates the direction of the alignment of the notification texts, it can be:
  • auto.
  • ltr: align notification texts to the left:

Click on the following button to launch the notification with the text aligned to the left:

• Launch notification (text on the left)!
• rtl: align notification texts to the right:

Click on the following button to launch the notification with the text aligned to the right:

• Launch notification (text on the right)!
• lang: Specifies the language used in the notification.
• tag: Notification identifier.
• icon: URL of an image to be used as an icon in the notification:

 

JavaScript notification permissions

It is possible that if we simply launch the notification as follows without requesting permissions:

var notification = new Notification("Hola Mundo")

It is not enough to show the notification; As with the geolocation API in HTML5, it is necessary to request permission from the user to view notifications:

The Notification.requestPermission() method to request permissions from the user...

This method is used to ask the user if they allow notifications to be displayed:

Once the response is obtained from the user, notifications can be defined and launched in the body of the method:

Notification.requestPermission() Method Syntax

Notification.requestPermission(function(permission){ var notification = new Notification("Hola Mundo"); });

Notification event handlers

Notification.onclick

Event that indicates when the user clicks on the notifications.

Notification.onshow

Event that indicates when notifications are displayed.

Notification.onerror

Event that indicates when an error occurs.

Notification.onclose

Event that indicates when notifications are closed.

The basic syntax for all the events seen above is as follows:

var notification = new Notification( "Hola Mundo");

                notification.onshow = show();
                notification.onerror = error();
                notification.onclose = close();
                notification.onclick = click();

                function show() {
                    console.log("Se abrió la notificación");
                }
                function error() {
                    console.log("Ocurrió un error con la notificación");
                }
                function close() {
                    console.log("Se cerró la notificación");
                }
                function click() {
                    console.log("Clic la notificación");
                }

Notification properties

Notification.permission

indicates the current permissions granted by the user to display notifications; they may be:

• granted: User allows notifications to be shown.
• denied: The user denied the notifications.
• default: The user's decision is not known; It is likely that the user has not yet been asked for permission to show notifications.

There are also other read-only properties such as:

Notification.title

Title of the notification.

Notification.dir

Notification direction.

Notification.lang

Language used in the notification.

Notification.body

Secondary text of the notification.

Notification.tag

Notification ID.

Notification.icon

URL of the image used as the notification icon.

Final example of notifications in JavaScript

With the following JavaScript code:

                 function notificacionBasica() {

                    var notification = NULL;

                    if (!('Notification' in window)) {
                        // el navegador no soporta la API de notificaciones
                        alert('Su navegador no soporta la API de Notificaciones :(');
                        return;
                    } else if (Notification.permission === "granted") {
                        // Se puede emplear las notificaciones

                        notification = new Notification( "Hola Mundo");

                    } else if (Notification.permission !== 'denied') {
                        // se pregunta al usuario para emplear las notificaciones
                        Notification
                                .requestPermission(function(permission) {
                            if (permission === "granted") {
                                notification = new Notification(
                                        "Hola Mundo");
                            }
                        });
                    }

                }

And a button in HTML to activate the notification:

<button onclick="notificacionBasica()">¡Lanzar notificación básica!</button>

We get a notification like the following:

Click on the following button:

Launch basic notification!

You can find all the examples seen so far in the following links:

Example Download