Notificaciones de escritorio, crea las tuyas con JavaScript

Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que estuve hablando hace unos días con una persona. Y la verdad es que nunca me había planteado la necesidad de enviar notificaciones de escritorio desde una web. Pero como esta persona está interesada en poder hacer que una de sus páginas envíe notificaciones al escritorio, pues me decidí a escribir un pequeño artículo en el que mostrar cómo crear estas notificaciones utilizando JavaScript.

Las notificaciones de escritorio en HTML5 y JavaScript, ofrecen a los desarrolladores una herramienta poderosa para mantener a los usuarios informados y comprometidos con sus aplicaciones web, incluso cuando la página no está activa en el navegador. En las siguientes líneas veremos el funcionamiento de estas notificaciones mediante un código de ejemplo básico, pero funcional.

Aplicaciones prácticas de las notificaciones de escritorio

Antes de empezar con el turrón del artículo, creo que es importante recordarme a mi mismo para que pueden resultar útiles este tipo de notificaciones.

1. Recordatorios y Actualizaciones: Las notificaciones son ideales para enviar recordatorios y actualizaciones importantes a los usuarios, incluso si no están actualmente en tu sitio web.
2. Interacción sin Abrir el Navegador: Las notificaciones permiten la interacción directa con tu aplicación sin necesidad de abrir el navegador. Por ejemplo, un usuario puede recibir notificaciones de nuevos mensajes sin tener que acceder a la aplicación de mensajería.
3. Feedback de Acciones: Puedes utilizar notificaciones para proporcionar feedback inmediato sobre acciones específicas realizadas por el usuario. Por ejemplo, agradecerles por hacer clic en un elemento o informarles sobre el éxito de una operación.

Un vistazo rápido a este ejemplo

Solicitando Permiso

Antes de sumergirnos en el código, es fundamental comprender la importancia de solicitar permiso. La API de Notificaciones de HTML5 que vamos a utilizar, requiere que los desarrolladores obtengan el permiso del usuario antes de mostrar cualquier notificación. Esto garantiza que las notificaciones no sean invasivas y se muestren solo a aquellos que han dado su consentimiento. Para conseguir esto, añadiremos el siguiente código a nuestro pequeño proyecto:

Notification.requestPermission().then(function(result) {
    console.log(result);
});

Verificación de Permiso

Después de obtener el permiso, es crucial verificar si el usuario lo ha otorgado antes de intentar mostrar una notificación. La función verificarPermiso hace precisamente eso, comparando el estado de Notification.permission con el valor "granted". Esto lo haremos con el código:

function verificarPermiso() {
    return Notification.permission === "granted";
}

Mostrar notificaciones

En este ejemplo que vamos a crear, tendremos la posibilidad de utilizar dos notificaciones de escritorio diferentes. La primera será tan solo informativa, y la segunda nos permitirá una pequeña interacción, además de que mostrará una imágen además del texto.

Mostrar Notificación 1

La primera de las notificaciones se va a crear utilizando new Notification(). Si el usuario ha otorgado el permiso necesario, se mostrará la notificación; de lo contrario, se mostrará un mensaje de alerta en el que se avisará de que todavía no se ha dado el permiso necesario.

function mostrarNotificacion1() {
    if (verificarPermiso()) {
        const notification = new Notification("Hola notificación 1!");
    } else {
        alert("No se ha dado permiso para enviar las notificaciones al escritorio.");
    }
}

Mostrar Notificación 2

La segunda notificación incluye algunas opciones adicionales, como son un cuerpo de mensaje e un ícono personalizado. Además, se asigna un evento onclick,el cual va a crear y mostrar una tercera notificación cuando se hace clic en la segunda.

function mostrarNotificacion2() {
    if (verificarPermiso()) {
        const options = {
            body: "Notificación 2 con imagen y evento",
            icon: "logo.png"
        }
        const notification2 = new Notification("Nueva notificación!", options);

        notification2.onclick = function(e) {
            const notification3 = new Notification("Gracias por hacer clic en la notificación 2");
        }
    }
}

El código completo de este ejemplo para mostrar notificaciones de escritorio

Como decía líneas más arriba, las notificaciones de escritorio en HTML5 ofrecen una manera efectiva de mejorar la experiencia del usuario y mantenerlos comprometidos con tu aplicación web. Para crear este ejemplo de muestras, solo necesitaremos crear dos archivos. Un index.html, y otro que he llamado notificaciones.js, en el que alojaremos el javascript.

Archivo index.html

Dentro de este archivo tan solo vamos a añadir dos botones, para lanzar las notificaciones en el escritorio. Esto podría hacerse de otras formas, pero como quería probar las dos notificaciones, creo que la opción de los botones es la mejor. Además añadiremos el archivo JavaScript en el que vamos a alojar todo lo necesario para que se muestren las notificaciones que quedamos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explorando las Notificaciones de Escritorio en HTML5</title>
</head>
<body>

<h1>Notificaciones</h1>

<br>
<button id="not1">Notificación 1</button>
<button id="not2">Notificación 2</button>

<!-- Incluimos el archivo JavaScript externo -->
<script type="text/javascript" src="notificaciones.js"></script>

</body>
</html>

Archivo notificaciones.js

Ahora, dentro de este archivo, será en donde vamos a pedir permiso al usuario para que la página pueda enviar las notificaciones al escritorio. También tendremos que verificar si se ha dado permiso. Después de esto, tendremos las notificaciones encapsuladas en sus correspondientes funciones (para evitar confusiones).

// Solicitamos permiso de notificaciones cuando se carga la página
Notification.requestPermission().then(function(result) {
    console.log(result);
});

// Función que verifica si se tiene permiso para mostrar notificaciones
function verificarPermiso() {
    return Notification.permission === "granted";
}

// Función para mostrar la primera notificación
function mostrarNotificacion1() {
    if (verificarPermiso()) {
        const notification = new Notification("Hola notificación 1!");
    } else {
        alert("No se ha dado permiso para enviar las notificaciones al escritorio.");
    }
}

// Función para mostrar la segunda notificación con imagen y evento
function mostrarNotificacion2() {
    if (verificarPermiso()) {
        const options = {
            body: "Notificación 2 con imagen y evento",
            icon: "logo.png"
        }
        const notification2 = new Notification("Nueva notificación!", options);

        notification2.onclick = function(e) {
            const notification3 = new Notification("Gracias por hacer clic en la notificación 2");
        }
    }
}

// Asignamos las funciones a los eventos onclick de los botones
document.querySelector("#not1").onclick = mostrarNotificacion1;
document.querySelector("#not2").onclick = mostrarNotificacion2;

Y bueno, una vez guardado todo esto dentro de su correspondiente archivo, solo queda ejecutar el archivo .html para probar a enviar las notificaciones al escritorio. Si quieres ver funcionando este ejemplo, puedes verlo en la sección de ejemplos de esta página. Es evidente que para que funcione tendrás que permitir al navegador enviar notificaciones al escritorio, como se indicó líneas más arriba.

Este código se puede encontrar también publicado en el repositorio de Github en donde he alojado este pequeño ejemplo.