07

8

Lanza notificaciones con la API de HTML5

La API de notificaciones es una de las novedades de HTML5 y en las últimas versiones de los navegadores más modernos ha sido implementada su especificación estándar, por lo que ya podemos usarlo sin que sufra modificaciones en el futuro.
Las notificaciones nos permiten mostrar un cuadro emergente con un texto y una imagen que aparecerá encima de todas las ventanas, aunque no estemos mirando el navegador.

Como vemos en la imagen en la notificación tenemos un título, un texto y una imagen, que podemos usar de distintas formas.
La API además genera eventos cuando la pulsamos o cerramos, por lo que puede ayudarnos a hacer aplicaciones web complejas.
Nota: Chrome y Firefox en su versión más reciente incorporan el estándar sin necesidad de prefijos.

Uso de la API

Esta API necesita permiso para poderla usar y puede estar en tres estados ese permiso: default (sin establecer permiso), granted (permiso concedido) y denied (permiso denegado).
Los permisos son necesarios para evitar que cualquier aplicación o web te llene la pantalla de notificaciones molestas, por ello debemos de pedir permiso antes con la función Notification.requestPermission(), que pregunta al usuario si quiere activar las notificaciones.

Nota: Chrome solo se diferencia por no disponer de la forma estándar de comprobación de permiso y devuelve "0" (permiso concedido), "1" (sin establecer permiso) y "2" (permiso denegado).

En el bloque de abajo preguntaremos el permiso del que disponemos y podremos pedir permiso para lanzar notificaciones (para comprobar el cambio de permiso).

1. // Consultar de forma estándar el permiso
2. Notification.permission
4. // Consultar de forma estándar el permiso
5. window.webkitNotifications.checkPermission()

1. // Pedimos permiso (el navegador nos preguntará)
2. Notification.requestPermission()

Tipo de notificación

Las notificaciones podemos configurarlas de varias formas, podemos establecer un título, un bloque de texto más extenso y una imagen que se mostrará.
El primer dato que introducimos es el título, que es independiente del resto de datos, ya que los demás datos (como la URL de la imagen) están dentro de un objeto JSON donde podemos establecer varios parámetros extra.

1. var title = "Xitrus"
2. var extra = {

icon: "http://xitrus.es/imgs/logo_claro.png",

body: "Notificación de prueba en Xitrus"

3. }
4. // Lanzamos la notificación
5. new Notification( title, extra)

Para crear una notificación debemos de hacer un objeto nuevo, que nos proporciona la API, al que le proporcionamos el título de la notificación y en el segundo parámetro un objeto con información extra, que en este caso solo usaremos para poner una imagen y un texto (icon y body).
Ahora lanzamos la notificación con el código anterior.

Usar correctamente las notificaciones

Cada navegador gestiona a su forma las notificaciones, Chrome en mi caso solo muestra tres bloques y Firefox todos los que entren en la pantalla, por eso no debemos de abusar de las notificaciones o mostrarlas temporalmente.
Es recomendable cerrar la propia notificación cuando pase un tiempo para no molestar al usuario, aunque se puede eliminar al pulsarla o al dar a cerrar.

Para cerrar la notificación usaremos un setTimeout que cerrará nuestra notificación varios segundos más tarde (en este ejemplo se mostrará una notificación durante un segundo).

1. var noti = new Notification( "Notificación" )
2. setTimeout( function() { noti.close() }, 1000)

Gestionar los eventos

Cuando aparece una notificación podemos hacer dos cosas principalmente: pulsarla o cerrarla. Aunque hay más eventos usaremos estos dos solo.

En este ejemplo se mostrará cuando se produce cada evento.

1. var title = "Xitrus"
2. var extra = {

icon: "http://xitrus.es/imgs/logo_claro.png",

body: "Cierra o pulsa la notificación"

3. }
5. var noti = new Notification( title, extra)
7. noti.onclick = {

// Al hacer click

8. }
9. noti.onclose = {

// Al cerrar

10. }

Con estos eventos ya deberíamos de poder hacer una aplicación compleja, que responden cuando un usuario pulsa una notificación.

Resumen

Esta API nos da muchas posibilidades a la hora de crear aplicaciones web, por lo que probablemente a muchos les sea de ayuda para crear proyectos que hagan uso de AJAX o WebSockets para comunicarse con un servidor y poder notificar de cambios en tiempo real.

También os dejo el código listo para usarlo, con todo lo necesario para usar las notificaciones.

1. function prueba_notificacion() {

if (Notification) {

if (Notification.permission !== "granted") {

Notification.requestPermission()

}

var title = "Xitrus"

var extra = {

icon: "http://xitrus.es/imgs/logo_claro.png",

body: "Notificación de prueba en Xitrus"

}

var noti = new Notification( title, extra)

noti.onclick = {

// Al hacer click

}

noti.onclose = {

// Al cerrar

}

setTimeout( function() { noti.close() }, 10000)

}

2. }