Crear notificaciones web HTML con JavaScript

En esta ocasión quería llevar un tema que hace mucho realicé; crear notificaciones web HTML con JavaScript, pero donde no se encontraba información o, la que veía, estaba desactualizada u obsoleta.

Estamos hablando de las típicas Notificaciones de escritorio, últimamente ya toda aplicación tiene estas notificaciones de escritorio, más que todo las vemos en la aplicación de WhatsApp Web.

Para implementar esta API en nuestro sitio web, primero tenemos que conocer cuales navegadores soportan esta característica y en cuales versiones del navegador podemos usarlo. En este sentido contamos con Caniuse.

Al ser esta característica propia de JavaScript no necesitamos incluir ninguna librería. Ahora vamos a conocer cómo implementarlo con pocas líneas de código.

Notificaciones web HTML con JavaScript

Como lo mencionaba anteriormente, este fue un tema que poco había en español en la red, por lo cual, me puse a investigar más a fondo de cómo realizarlas sin tener que depender de servicios de terceros para poder lograrlo y, aquí, te explicaré cómo podemos hacerlo en unos cuantos pasos.

Primeros pasos de la implementación

Primero debemos verificar si el navegador del usuario soporta esta característica con una simple condicional podemos saberlo.

if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
}

Ahora que conocemos que es soportado por el navegador, procedemos a solicitar permiso al usuario para enviarle la notificación. Es muy importante este paso, pues sin la autorización del usuario no podemos hacer uso de las notificaciones.

if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
        // Acción si el usuario acepta.
    });
}

Ya vimos como solicitamos permisos al usuario, y dentro de este vimos una condicional que pregunta si el usuario no ha negado la solicitud, ahora si el usuario la acepta se haría de la siguiente manera.

if (Notification.permission === "granted") {
    // Si está bien vamos a crear una notificación.
}

Las notificaciones son un objeto en JavaScript bajo el nombre “notification”, por lo tanto, inicializamos el objeto, utilizando la sentencia de declaración “new” y como el mismo tiene varios métodos, es recomendable inicializar el objeto cargándolo a una variable de referencia para hacer uso, de una forma estructurada.

// Vamos a ver si ya se han concedido permisos de notificación
if (Notification.permission === "granted") {
    // Si está bien vamos a crear una notificación
    // Primero vamos a crear una variables las 
    // cuales forman nuestra norificación
    var body = "Hola";
    var icon = "https://quecodigo.com/img/qc_logo.jpg";
    var title = "Notificación";
    var options = {
        body: body,      //El texto o resumen de lo que deseamos notificar.
        icon: icon,      //El URL de una imágen para usarla como icono.
        lang: "ES",      //El idioma utilizado en la notificación.
        tag: 'notify',   //Un ID para el elemento para hacer get/set de ser necesario.
        dir: 'auto',     // izquierda o derecha (auto).
        renotify: "true" //Se puede volver a usar la notificación, default: false.
    }
    // Creamos la notificación con las opciones que pusimos arriba.
    var notification = new Notification(title,options);
    // Cerramos la notificación.
    setTimeout(notification.close.bind(notification), 5000);
}

Como vimos al objeto “notification” le pasamos parámetros, en este caso dos: el primero es el título de nuestra notificación que será presentada al usuario y el segundo es otro objeto que contiene las propiedades con las cuales personalizamos nuestra notificación.

El método de notificaciones recibe los siguientes parámetros

body: Contenido de la notificación.
icon: Url del icono (imagen).
tag: ID de la notificación, como nuestro identificador.
dir: Dirección del texto (izquierda, derecha o auto).
sound: Sonido al lanzar la notificación [No soportada]

Puedes leer más en: Notification#Propiedades_de_Instancia

Las notificaciones de escritorio aceptan los siguientes eventos

onclick
Al hacer click dentro de la notificación, podemos determinar que acción tomar, desde alertar al usuario hasta redirigirlo a una url.

onerror
Este evento nos permite realizar una o varias acciones en caso de que se produzca un error al intentar notificar al usuario. Por ejemplo, que algún parámetro no sea correcto o error de sintaxis al programar.

onshow
Permite realizar una acción inmediatamente se muestre la notificación al usuario.

onclose
OnClose nos permite realizar una acción cuando el usuario haga click sobre la x para cerrar la notificación. Por ejemplo, presentar otra notificación.

Aquí les dejo un código completo, personalizado con sonido.

onclick
Al hacer click dentro de la notificación, podemos determinar que acción tomar, desde alertar al usuario hasta redirigirlo a una url.

onshow
Permite realizar una acción inmediatamente se muestre la notificación al usuario.

onclose
OnClose nos permite realizar una acción cuando el usuario haga click sobre la x para cerrar la notificación. Por ejemplo, presentar otra notificación.

Aquí les dejo un código completo, personalizado con sonido.

<html>
    <head>
        <meta charset="UTF-8">
        <title>Notificaciones JavaScript</title>
        <script charset="UTF-8">
        function notifyMe() {
            //Vamos a comprobar si el navegador es compatible con las notificaciones
            if (!("Notification" in window)) {
                alert("This browser does not support desktop notification");
            }
            // Vamos a ver si ya se han concedido permisos de notificación
            else if (Notification.permission === "granted") {
                // Si está bien vamos a crear una notificación
                var body = "Hola";
                var icon = "https://quecodigo.com/img/qc_logo.jpg";
                var title = "Notificación";
                var options = {
                    body: body,
                    icon: icon,
                    lang: "ES",
                    renotify: "true"
                }
                var notification = new Notification(title,options);
                var audio = new Audio('https://quecodigo.com/web/antigua/sounds/notificacion.mp3');
                audio.play();
                notification.onclick = function () {
                    //action
                };
                setTimeout(notification.close.bind(notification), 5000);
            }
            // De lo contrario, tenemos que pedir permiso al usuario
            else if (Notification.permission !== 'denied') {
                Notification.requestPermission(function (permission) {
                    // Si el usuario acepta, vamos a crear una notificación
                    if (permission === "granted") {
                        var notification = new Notification("Gracias, Ahora podras recibir notifiaciones de nuestra página");
                    }
                });
            }
            // Por fin, si el usuario ha denegado notificaciones, y usted
            // Quiere ser respetuoso no hay necesidad de preocuparse más sobre ellos.
        }
        </script>
    </head>
    <body>
        <button onclick="notifyMe()">Notificame!</button>
    </body>
</html>

Esperamos te animes a realizar tu propio notificar.

¿Tienes alguna pregunta? Escríbenos en los comentarios.