Notificaciones como Facebook y WhatsApp web

Notification

Las notificaciones nos permiten mostrar información al usuario cuando nuestro sistema web dispara una acción o evento.

A veces, en nuestros sistemas, comúnmente utilizamos alertas personalizadas para mostrar información, sin embargo, estas solo son visibles cuando el usuario ha abierto la pestaña. Para dar una solución, la API de notificación HTML5 nos proporciona las herramientas para mostrar notificaciones de escritorio, que son visibles incluso cuando hemos minimizado el navegador.

¿Cómo comenzar a usar la notificación?

En primer lugar, necesitamos conocer la estructura de notificación, que consiste en un icono, título y cuerpo.

Para crear una nueva notificación, debemos llamar al constructor:

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

En este ejemplo, enviamos un texto como parámetro que se toma como título. Si queremos mostrar un mensaje e ícono, debemos enviar un objeto como en el siguiente ejemplo:

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

El objeto de notificación tiene permiso de parámetro de read-only. Este parámetro es una cadena que representa el permiso actual para mostrar notificaciones. Para verificar el valor actual del permiso, necesitamos escribir Notification.permission en la consola del navegador y cuando presionamos enter podemos encontrar uno de los tres resultados posibles:

  • default – valor inicial
  • granted – se permiten notificaciones en esta página web
  • denied – no se permiten notificaciones

Es importante saber que el usuario puede decidir permitir que el sitio web muestre o no notificaciones. Para preguntarle al usuario, usamos la propiedad requestPermission, esta es una función que recibe otra función como parámetro.

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

cuando ejecuta ese código, el navegador le muestra una alerta como esta, solo si su valor actual de Notificación.permisión es «default»

Pero, si ha denegado la notificación, verá una alerta con este mensaje que le faltan notificaciones en lugar de la alerta anterior.

Si hace clic en Permitir o en Notification.permission el valor actual del permiso está «granted», verá esta notificación

Para hacer notificaciones más hermosas, podemos codificar un generador de notificaciones como este

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

En el parámetro icono, puede enviar una imagen de URL como una cadena como esta

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

Ahora puedes comenzar a jugar con las notificaciones. Esta API funciona en todas las plataformas, pero puede ver la compatibilidad del navegador aquí.

Puedes consultar la documentación oficial aquí.

Claudia Andrade

Claudia Andrade

Leave a Replay

Join our mailing list

Get the latest articles written by our team.