Cómo mostrar notificaciones de escritorio usando JavaScript

La API de notificaciones de JavaScript permite que las páginas web muestren mensajes a los usuarios en sus dispositivos a través de diferentes plataformas. Estas notificaciones aparecen incluso después de que el usuario haya cambiado de pestaña o se haya movido a otra aplicación.

Estos mensajes (también llamados sistema o escritorio notificaciones) se puede usar para notificar al usuario sobre eventos importantes, como un correo electrónico, un nuevo mensaje de redes sociales, una notificación de chat en vivo, recordatorios de calendario, etc. Incluso puede usar las notificaciones del sistema para enviar campañas de marketing.

En este tutorial, explicaré el uso básico de la API de notificaciones para mostrar mensajes al usuario mientras el sitio está abierto en una pestaña del navegador.

Soporte del navegador

La API de notificaciones es bastante nueva y es posible que no funcione en navegadores más antiguos. Por lo tanto, debe verificar explícitamente si el navegador admite o no la API antes de mostrar un mensaje. Puede hacerlo comprobando si el window objeto tiene una propiedad llamada Notification :

if(!window.Notification) {
    console.log('Browser does not support notifications.');
} else {
    // display message here
}

En plataformas compatibles, mostrar una notificación de escritorio implica dos cosas:solicitar permiso y crear una nueva notificación para mostrar al usuario.

Solicitud de permiso

El usuario debe otorgar el permiso de origen actual para mostrar una notificación de escritorio. Puede verificar fácilmente si el usuario ya ha otorgado permiso para mostrar notificaciones del sistema usando Notification.permission propiedad. Esta propiedad tiene los siguientes valores posibles:

• default - El usuario aún no ha decidido aceptar las notificaciones de su sitio
• granted - El usuario ha permitido que su sitio muestre notificaciones
• denied - El usuario ha elegido bloquear las notificaciones de su sitio

Si es el primer caso, puede solicitar permiso al usuario mediante el requestPermission() método de la API de notificaciones. Se abrirá un cuadro de diálogo para pedirle al usuario que permita o bloquee las notificaciones de este sitio. Una vez que el usuario haya hecho una elección, la configuración se guardará para la sesión actual.

Si el usuario ya ha denegado la solicitud de mostrar notificaciones, no podemos hacer nada. El navegador ignorará cualquier solicitud para mostrar una notificación o solicitar permiso nuevamente.

if (!window.Notification) {
    console.log('Browser does not support notifications.');
} else {
    // check if permission is already granted
    if (Notification.permission === 'granted') {
        // show notification here
    } else {
        // request permission from user
        Notification.requestPermission().then(function(p) {
           if(p === 'granted') {
               // show notification here
           } else {
               console.log('User blocked notifications.');
           }
        }).catch(function(err) {
            console.error(err);
        });
    }
}

El requestPermission() método devuelve una promesa. La función de devolución de llamada se llamará una vez que la promesa se resuelva o se rechace (según la elección de notificaciones del usuario).

Mostrando notificación

Si el usuario ha elegido aceptar notificaciones de nuestro sitio, puede crear una nueva notificación de escritorio usando el Notification() constructor para mostrárselo al usuario. Simplemente pase un título al constructor para crear una nueva notificación.

var notify = new Notification('Hi there!');

Opcionalmente, también puede pasar un objeto de opciones para especificar la dirección del texto, el cuerpo del texto, un icono para mostrar, un sonido de notificación para reproducir y más.

var notify = new Notification('Hi there!', {
    body: 'How are you doing?',
    icon: 'https://bit.ly/2DYqRrh',
});

Poniendo todo junto, podemos crear una función que mostrará una notificación de escritorio una vez que se llame, solicitando permiso si aún no se ha otorgado:

function notifyMe() {
    if (!window.Notification) {
        console.log('Browser does not support notifications.');
    } else {
        // check if permission is already granted
        if (Notification.permission === 'granted') {
            // show notification here
            var notify = new Notification('Hi there!', {
                body: 'How are you doing?',
                icon: 'https://bit.ly/2DYqRrh',
            });
        } else {
            // request permission from user
            Notification.requestPermission().then(function (p) {
                if (p === 'granted') {
                    // show notification here
                    var notify = new Notification('Hi there!', {
                        body: 'How are you doing?',
                        icon: 'https://bit.ly/2DYqRrh',
                    });
                } else {
                    console.log('User blocked notifications.');
                }
            }).catch(function (err) {
                console.error(err);
            });
        }
    }
}

Ahora podemos llamar a la función anterior cuando el usuario hace clic en un botón:

<button onclick="notifyMe()">Notify Me</button>

Alternativamente, puede vincular la función anterior al cuerpo onload evento que se llamará una vez que la página web esté completamente cargada:

<!DOCTYPE html>
<html>
<body onload="notifyMe()">
<!-- body content-->
</body>
</html>

Conclusión

Eso es todo amigos para mostrar notificaciones de escritorio usando la API de notificaciones de JavaScript. Esta es la forma más sencilla de mostrar las notificaciones que requieren que el sitio se abra en el navegador. En el futuro, hablaré sobre el uso más avanzado de la API de notificaciones para enviar notificaciones web push. desde el lado del servidor.