El pasado 12 de Septiembre se publicó en la W3C el Working Draft 12 de Web Notifications, donde dicha Api ha adquirido tal madurez que ya son 3 los navegadores que ya soportan este tipo de notificaciones: Chrome (del cual hace tiempo escribí un post al respecto), Firefox y Safari 6 (OS X Mountain Lion).
La antigua implementación de la API se ha mantenido en Chrome, pero en este post vamos a ver la nueva forma de trabajar con esta Api y conseguir además que sea compatible con los navegadores que a día de hoy hacen uso de ella.
window.Notification
La interfaz que se encarga de gestionar las notificaciones es Notification dentro de window, la cual trae consigo los siguiente miembros:
- Permission
- Las notificaciones sólo pueden mostrarse si el usuario, o un agente por mediación del usuario, ha dado permiso a la aplicación web. Los valores que puede tener son los siguientes: «default» (equivalente a «denied», ya que es el valor por defecto de los navegadores cuando el usuario no ha indicado si acepta el uso de notificaciones o no), «granted» y «denied». Google Chrome también hace uso de undefined cuando el usuario no ha tomado una decisión al respecto.
- requestPermission
- Método asíncrono que solicita permiso al usuario. Cuando esto ocurre, el navegador mostrará un mensaje al usuario pidiendo autorización. En el caso de Firefox podemos verlo de la siguiente manera:
Por otro lado en Chrome nos muestra dos opciones: Allow y Deny: - Event handlers
- Como es de esperar, podemos hacer uso de los siguientes eventos relacionados con una notificación: onclick, onshow, onclose, onerror.
- NotificationOptions
- Se trata de las opciones que podemos asociar a una notificación en el momento de su creación:
- dir: Dirección del texto
- lang: Idioma del mensaje
- body: Cuerpo del mensaje
- tag: Se utiliza cuando tenemos múltiples instancias de la aplicación. Más información.
- icon: Imagen que se mostrará junto con mensaje.
Es importante señalar que una notificación es representada por un objeto del tipo window.Notification y puede ser creada a través de su constructor (new Notification).
Para ver cómo encajan todas las piezas, veamos el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Web Notifications Api</title>
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<input id="btnNotification" type="button" value="Notification" />
<script>
window.addEventListener('load', function () {
function getPermission() {
if ("Notification" in window && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status)
Notification.permission = status;
});
}
}
getPermission(); //Only Firefox
document.addEventListener("click", getPermission);
var btnNotification = document.getElementById('btnNotification');
btnNotification.addEventListener("click", function () {
if ("Notification" in window && Notification.permission === "granted") {
var icon = "https://www.returngis.net/wp-content/uploads/pics/2012/11/angry-bird-icon.png",
bodyMessage = "This is my body message!",
notification = new Notification("Notification!", { icon: icon, body: bodyMessage });
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 3000);
};
notification.onclose = function () {
console.log("notification.onclose fired");
};
notification.onerror = function () {
console.log("notification.onerror fired");
};
notification.onclick = function () {
console.log("notification.onclick fired");
};
}
});
});
</script>
</body>
</html>
Cuando la página ha cargado, lo primero que hacemos es llamar a la función getPermission. En ella lo que hacemos es preguntar al usuario si podemos hacer uso de las notificaciones. En el código anterior se indica que esa llamada es solamente para Firefox. Esto es debido a que en Chrome (en Safari 6 no he tenido la oportunidad de probarlo aún) es necesario que la llamada a Notification.requestPermission se haga por mediación de un evento donde el usuario se haya visto involucrado. En este ejemplo capturo los eventos click que lleguen a document y así consigo una llamada válida para Chrome y solicitar dicho permiso (de otra forma aunque se haga la llamada a requestPermission directamente el navegador la obviará).
Una vez que tenemos permiso para utilizar la Api («granted») creamos nuestra notificación. Para ello utilizaremos new Notification donde se le pasará como primer parámetro el título del mensaje a mostrar y como segundo parámetro un object literal donde podemos indicar los valores mencionados anteriormente.
Por último, podemos ver que a nuestro objeto Notification podemos añadirle distintos manejadores con el objetivo de realizar alguna acción adicional. En el caso de Firefox las notificaciones se cierran después de un lapso de tiempo, pero en Chrome es necesario realizar la llamada a notification.close() (en este ejemplo, pasados 3 segundos desde que se mostró la notificación).
Configuración para Web Notifications en los navegadores
Es posible, sobre todo durante el tiempo de desarrollo, que queramos gestionar aquellos sitios donde hemos aceptado o rechazado el acceso a esta Api con anterioridad. En el caso de Chrome podemos encontrar su configuración en Settings –> Show avanced settings… –> Apartado Privacy –> Content Settings –> Notification –> Manage Exceptions.
En el caso de Firefox, cuando estamos en el sitio web en concreto podemos acceder a su configuración en Tools –> Page Info –> Permissions –> Show Notifications.
En el caso de Safari 6, donde las notificaciones se muestran en el Centro de Notificaciones de OS X Mountain Lion, no he podido hacer la prueba personalmente ya que mi Macbook está algo mayor para soportar esta versión de OS X 🙁 Para este caso podéis encontrar la gestión de las notificaciones en este enlace.
Espero que haya sido de utilidad.
¡Saludos!