Notificaciones de escritorio con javascript

Notification desktop
Notification desktop

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..

Twitter LinkedIn Flickr YouTube 

8 thoughts on “Notificaciones de escritorio con javascript

    1. 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

    1. 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

  1. 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

  2. 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;
    }())

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *