Las notificaciones es una de las novedades de HTML5 y en las últimas versiones de los navegadores, por lo que ya se pueden usar sin que haya 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. Cada navegador gestiona las notificaciones a su manera, Chrome muestra tres bloques y Firefox todos los que entren en la pantalla, por eso no hay que de abusar de las notificaciones. 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.
En este post os voy a explicar como mostrar notificaciones con javascript:

• Primero se pedirá permiso para aceptar las modificaciones:

  
    let permission = Notification.permission;
  

• Después se gestiona las notificaciones con lo seleccionado por el usuario:

  
         if(permission === "granted"){
           mostrarNotificacion();
        } else if(permission === "default"){
           pedirPermisoNotificaciones();
        } else {
          alert("Use normal alert");
        }
  

• Si el usuario permite las notifaciones se configura el mensaje de la notificación:

  
  let title = 'Título de la notificación';
  let icon = 'Ruta al icono que mostrar, como logo de la web o lo que sea';
  let body = 'Mensaje de la notifiación';
  var notification = new Notification(title, { body, icon });
  

    if (Notification) {
        if (Notification.permission !== "granted") {
            Notification.requestPermission()
        }
        let title = 'Título de la notificación';
        var extra = {
           let icon = 'Ruta al icono que mostrar, como logo de la web';
           let body = 'Mensaje de la notifiación';
        }
        var noti = new Notification( title, extra)
        noti.onclick = {
            // Al hacer click
        }
        noti.onclose = {
            // Al cerrar
        }
        setTimeout( function() { noti.close() }, 10000)
    }

Compartir en twitter