Desde la llegada de HTML5 tenemos cada vez más control y acceso sobre los dispositivos, ya sea acceder a la cámara o incluso poder hacer vibrar un dispositivo móvil; Aunque estas características aún no son del todo soportada por navegadores, vale la pena aprenderlas a usar y saber como funcionan.
En este artículo nos enfocaremos en la API de notificación, pero para empezar ¿Qué es la API de notificación?
La API de notificación es una forma de notificar a nuestros usuarios cuando surge cierta acción o evento. Estas notificaciones pueden aparecer incluso cuando estemos en otra pestaña.
Cómo usar API Notification
Empezaremos definiendo dos botones:
HTML
<button id="buttonP">Dar Permisos</button>
<button id="buttonN">Lanzar notificación</button>
El primer botón va a dar el permiso para poder usar esta API, el segundo botón va a lanzar nuestra notificación.
Ahora definamos cuatro variables:
Javascript
var btnNotificacion = document.getElementById("buttonN"),
btnPermiso = document.getElementById("buttonP")
titulo = "Fili Santillán",
opciones = {
icon: "logo.png",
body: "Notificación de prueba"
};
La variable btnNotificacion representa a nuestro botón 1.
La variable btnPermiso representa a nuestro botón 2.
La variable titulo representa el título de nuestra Notificación.
La variable opciones representa la imagen y cuerpo de nuestra notificación.
Ahora que ya tenemos nuestras variables, vamos a crear una función:
Javascript
function permiso() {
Notification.requestPermission();
};
Esta función va a pedir permiso para mostrar las notificaciones.
En cuanto a los permisos, tenemos tres resultados:
- default: Cuando el usuario aún no establece el permiso.
- granted: Cuando el usuario concede el permiso.
- denied: Cuando el usuario bloquea el permiso.
Ahora vamos a definir una segunda función:
Javascript
function mostrarNotificacion() {
if(Notification) {
if (Notification.permission == "granted"){
var n = new Notification(titulo, opciones);
}
else if(Notification.permission == "default") {
alert("Primero da los permisos de notificación");
}
else {
alert("Bloqueaste los permisos de notificación");
}
}
};
Con if(Notification) verificamos si el navegador es compatible, si es así, va a ejecutar lo que hay dentro.
En caso de que el usuario concedió el permiso if(Notification.permission == "granted"), vamos a crear una variable con el nombre n que va a hacer nuestra notificación, recibiendo los parámetros de titulo y opciones.
En caso de que el usuario no ha establecido el permiso else if(Notification.permission == "default"), vamos a lanzar un alert para notificarle.
En caso de que el usuario bloquee el permiso else, vamos a lanzar un alert para notificarle.
Para terminar, solo falta agregar dos eventos a nuestros botones:
Javascript
btnPermiso.addEventListener("click", permiso);
btnNotificacion.addEventListener("click", mostrarNotificacion);
Para cerrar nuestra notificación podemos usar:
n.close();
n es la variable que definimos anteriormente.Nuestro código JavaScript completo se debe ver de la siguiente manera:
Código completo
var btnNotificacion = document.getElementById("buttonN"),
btnPermiso = document.getElementById("buttonP")
titulo = "Fili Santillán",
opciones = {
icon: "logo.png",
body: "Notificación de prueba"
};
function permiso() {
Notification.requestPermission();
};
function mostrarNotificacion() {
if(Notification) {
if (Notification.permission == "granted") {
var n = new Notification(titulo, opciones);
}
else if(Notification.permission == "default") {
alert("Primero da los permisos de notificación");
}
else {
alert("Bloqueaste los permisos de notificación");
}
}
};
btnPermiso.addEventListener("click", permiso);
btnNotificacion.addEventListener("click", mostrarNotificacion);
La API de notificaciones como puedes ver es bastante fácil de usar y muy buena a la hora de crear aplicaciones, estoy seguro de que ahora mismo ya se te ocurrieron diferentes formas de usarla, pero esto no es todo, con esta API incluso puedes usar sonidos, hacer vibrar un dispositivo y mucho más...
Si quieres profundizar con esta API te recomiendo ver su documentación en Mozilla Developer Network.