Entre las nuevas API’s de javascript, descubrimos las notificaciones de escritorio, esa bonita y curiosa forma en que aplicaciones web nos envían alertas y avisos aunque no tengamos la pestaña activa de nuestro navegador o aunque tengamos nuestro navegador abierto, pero estamos trabajando en alguna otra aplicación.
Implementarlo es muy sencillo y con unas pocas líneas de código, nuestro navegador nos pedirá permiso para ejecutar y enviar notificaciones.
var notification = new Notification("hello notificación world"); |
El método notifications recibe adicionalmente otros parámetros q explicó a continuación:
title: Es el título del cuadro de notificación
body: Contenido de la notificación
icon: Url del icono (imagen)
tag : ID de la notificación, como nuestro identificador
dir: Dirección del texto (izquierda, derecha o auto)
Ahora un ejemplo mas concreto se vería de la siguiente manera:
function notifyMe() { if (!("Notification" in window)) { alert("Este navegador no soporta notificaciones de escritorio"); } else if (Notification.permission === "granted") { var options = { body: "Descripción o cuerpo de la notificación", icon: "url_del_icono.jpg", dir : "ltr" }; var notification = new Notification("Hola :D", options); } else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { if (!('permission' in Notification)) { Notification.permission = permission; } if (permission === "granted") { var options = { body: "Descripción o cuerpo de la notificación", icon: "url_del_icono.jpg", dir : "ltr" }; var notification = new Notification("Hola :)", options); } }); } } |
Y bueno, todo este código es la implementación validando si se tiene permiso de utilizar las notificaciones o si es la primera vez que se de desean utilizar (porque se debe solicitar permiso al navegador).
Y claro, olviden que para lanzarla será necesario hacer trigger sobre algún botón o enlace, ya saben.. el típico evento click() con el código dentro.
Las notificaciones de escritorio están soportadas por la mayoría de navegadores modernos, a excepción de Internet Explorer que por cierto en nuestro blog no se ha hablado muy bien de él. También hay que tener en cuenta de que las notificaciones son una tecnología experimental o al menos así le llaman, ya que se encuentra en revisión su especificación.
Happy coding!! 🙂
Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!
Si te ha servido compártelo y difunde nuestro blog..
No tenia idea de eso se puede hacer con JavaScript, me fue muy útil en una de mis proyectos de la universidad.
Vaya que si puede ser útil, ahora que se está extendiendo el uso de nuevas APIs con javascript, las notificaciones de escritorio mezcladas con audio aportan mucho a las aplicaciones web.
Que bueno que nuestro artículo haya despertado esa curiosidad.
Saludos
Tengo una pregunta, como envio una notificacion desde mi sitio Web al navegador del cliente, puesto que esa parte veo que no se explica en este tutorial.
Hola abinael, actualmente existen 2 formas de enviar notificaciones al cliente, una de ellas es la que explico en este artículo y probarla es muy sencillo, pues solamente necesitas ejecutar el código de la función “notifyMe” (copy+paste en tu consola de developer) y luego la ejecutas igualmente desde la consola haciendo “notifyMe()” tal y como lo harías desde el código de tu sitio web, inmediatamente luego de ejecutar la función, una ventana de preguntando si o no deseas dar privilegios para acceder a las notificaciones aparecerá y si aceptas, verás el mensaje.
La otra forma es un poco más nueva y no necesariamente se necesita tener el navegador abierto, me refiero a las notificaciones push introducidas en chrome desde la versión 42, ésta última es un poco más compleja de utilizar ya que hace uso de los web workers, pero funciona muy bien tanto para versiones de escritorio como para móviles, la documentación se encuentra en este enlace “https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web” y un ejemplo que hice para probarlo está en mi página de github, puedes usar tu computadora o tu teléfono y debe funcionar para ambos.
Saludos
Hola una consulta, no me corre al llamarlo desde el evento onClik del control
deberías postear el error, aunque si escribes onclik no te funcionará porque hace falta la letra “c” – onclick
hola que tal, soy nuevo en JS pero quisiera si hay alguna forma o coomo se haria si yo quiera recibir una notificacion sobre un texto en especifico que aparece en una pagina X.. por ejemplo: si en una pagina especifica aparece un texto diciendo ” hola mundo ” quisiera recibir una notificacion de que ese texto esta en la pagina.. no se si me explico espero que hayas entendido saludos
hola gracias a tu ejemplo hice esta clase que puede servir a alguien.
para usarla, es tan sencillo como esto
var notificaciones = new Notificaciones(); //declarado a nivel global
notificaciones.nueva(“Titulo”, “Texto”); //se puede usar en cualquier otro script
Saludos.
var Notificaciones = (function () {
function Notificaciones(params){
this.tieneSoporte = “Notification” in window;
this.tieneAcceso = false;
if (this.tieneSoporte){
this.getAcceso();
}
this.ultimaNotificacion = null;
this.notificaciones = [];
}
Notificaciones.prototype.getAcceso = function(){
var _this = this;
Notification.requestPermission(function (permission) {
_this.tieneAcceso = permission === “granted”;
})
}
Notificaciones.prototype.nueva = function (titulo, texto) {
this.ultimaNotificacion = new Notification(titulo, {
body: texto,
icon: “url_del_icono.jpg”,
dir: “ltr”
});
this.notificaciones.push(this.ultimaNotificacion);
}
return Notificaciones;
}())