Los usuarios abren muchas ventanas de su navegador a la vez para leer, conversar, escribir correos, ver su Facebook o Twitter o cualquier otra de las miles de cosas que se pueden hacer en la internet. HTML5 provee un API que permite “llamar la atención” del usuario entre tantas distracciones de forma que podamos traerlo a continuar en nuestro sitio web por medio de javascript. Este API es el Web Notifications.
Para implementar este API en nuestro sitio web o nuestra web app, primero tenemos que conocer cuales navegadores soportan este API y en cuales versiones del navegador podemos usarlo. En este sentido contamos con Caniuse.
Ahora que sabemos si podemos utilizar este API en nuestro proyecto, vamos a conocer como implementarlo con pocas líneas de código.
Lo primero es detectar el método correcto para utilizar el API de acuerdo al navegador del usuario. Creamos una variable donde invocaremos empleando el operador OR:
var notification = window.Notification || window.mozNotification || window.webkitNotification;
Ahora que conocemos cual método utilizar según 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 del API.
if ('undefined' === typeof notification)
alert('Tu navegador no soporta notificaciones');
else
notification.requestPermission(function(permission){});
Ya hemos completado la primera etapa de la implementación que es detectar y solicitar los permisos para notificar al usuario por medio del navegador. En un ambiente de producción podemos omitir el alerta en caso de que el navegador no soporte notificaciones para hacerlo en modo silencioso.
Las notificaciones son un objeto en javascript bajo el nombre “notification”, por lo tanto, inicializamos el objeto por 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 estos métodos de una forma estructurada:
var notificar = new notification(
titulo, {
body: contenido, //el texto o resumen de lo que deseamos notificar
dir: 'auto', // izquierda o derecha (auto) determina segun el idioma y region
lang: 'ES', //El idioma utilizado en la notificación
tag: 'notificationPopup', //Un ID para el elemento para hacer get/set de ser necesario
icon: '' //El URL de una imágen para usarla como icono
}
);
Como vemos, al objeto notification, le pasamos parámetros, en este caso dos: el primero es el titulo de nuestra notificación que será presentada al usuario y el segundo es otro objeto que contiene las propiedades de la notificación, como el texto, la posición (dir), el idioma (lang), un ID (tag) y un ícono o imagen que acompañara a la notificación.
El Web Notification API soporta 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.
Ya sabemos como detectar si el navegador soporta el API de notificaciones. Sabemos como solicitar el permiso para mostrar las notificaciones y conocemos los métodos disponibles del API. Ahora podemos completar nuestra implementación y posteriormente hacer el llamado para invocar la notificación.
La mejor forma de implementar las notificaciones y aprovechar sus métodos es creando una función dentro de la que podamos verificar el soporte del API, crear nuestra notificación y tener acceso a los métodos. Entonces nuestra función sería la siguiente:
function Notifica(titulo, contenido)
{
if ('undefined' === typeof notification)
return false; //Not supported....
var notificar = new notification(
titulo, {
body: contenido, //el texto o resumen de lo que deseamos notificar
dir: 'auto', // izquierda o derecha (auto) determina segun el idioma y region
lang: 'ES', //El idioma utilizado en la notificación
tag: 'notificationPopup', //Un ID para el elemento para hacer get/set de ser necesario
icon: 'https://www.weblantropia.com/wp-content/uploads/2014/11/copy-weblantropia_logo.png' //El URL de una imágen para usarla como icono
}
);
notificar.onclick = function () {
console.log('notification.Click');
};
notificar.onerror = function () {
console.log('notification.Error');
};
notificar.onshow = function () {
console.log('notification.Show');
};
notificar.onclose = function () {
console.log('notification.Close');
};
return true;
}
Ahora solo necesitamos invocar nuestra función “Notifica”, generalmente se utiliza al cargar la página o en mejor caso empleando un setTimeout para ejecutarla. Otra forma es empleando Page Visibility API, otro API de HTML5. Este permite saber el estado de la pestaña del navegador, es decir si el usuario está actualmente en nuestro sitio o si tiene nuestro sitio abierto en un tab; pero esta de forma activa en otro sitio.
Para invocar nuestra notificación lo hacemos simplemente ejecutando la función y pasando los parámetros necesarios (titulo y contenido):
Notifica('Titulo Notificacion', 'Copy texto notificacion');
De esta forma podemos utilizar la misma función para enviar una o más notificaciones según nuestra necesidad pasando los parámetros deseados, incluso modificando la declaración de la función para permitir que más parámetros sean dinámicos como el icono, urls para el evento onclick, etc.
Pueden conocer más sobre esta muy útil API en la Red de Desarrolladores de Mozilla (MDN).