Por algún extraño motivo, la mayoría de los navegadores todavía no han considerado la implementación de una de las APIs que aportaría una de las características más demandadas de las aplicaciones de escritorio: Los mensajes emergentes o pop ups 🙂
Web Notifications se trata de una API que nos permitirá el envío de notificaciones al usuario fuera del contexto del navegador, es decir podremos mostrar notificaciones fuera del navegador como mensajes emergentes 😀

A día de hoy sólo Chrome está implementando esta funcionalidad y hace uso de ella en algunas de sus aplicaciones que facilita a través de Chrome Web Store, como por ejemplo en su aplicación de Gtalk.

Si utilizáis Chrome, podéis visualizar un mensaje a través del siguiente ejemplo:

Si es la primera vez que se ejecuta el código, el primer paso es autorizar las notificaciones emergentes y a partir de ahí podremos recibir todas las notificaciones del dominio autorizado.
En realidad la API es bastante sencilla y sólo son necesarios unos pocos pasos para conseguir esta funcionalidad:

window.onload = function() {
    var btnNotification = document.getElementById("btnNotification");
    //Compatibility (Chrome Only)
    window.Notifications = window.webkitNotifications;
    if (window.Notifications) {
        btnNotification.addEventListener("click", function() {
            if (window.Notifications.checkPermission() == 0) { // Allowed
                var icon = "https://www.returngis.net/wp-content/uploads/pics/2012/11/angry-bird-icon.png",
                    title = "Web Notifications API",
                    message = "You can do something like this!!";
                var notification = window.Notifications.createNotification(icon, title, message);
                //Handlers
                notification.onshow = function() {
                    console.log("onshow fired");
                    setTimeout(function() {
                        notification.close();
                    }, 5000);
                };
                notification.onclick = function() {
                    console.log("onclick fired");
                };
                
                notification.onerror = function() {
                    console.log("onerror fired");
                };
                notification.onclose = function() {
                    console.log("onclose fired");
                };
                notification.show();
            }
            else {
                window.Notifications.requestPermission();
            }
        });
    }
    else {
        var span = document.querySelector("header h1 span");
        span.textContent = "Not supported";
        span.style.color = "red";
    }
}

Como se puede ver en el código anterior, Chrome almacena la interfaz dentro de window.webkitNotifications, pero procuro que la misma esté disponible directamente en window.Notifications por si en un futuro más navegadores implementan esta API y quiero que mi código sea homogéneo para todos.
Agrego un manejador al evento click de mi botón y compruebo como primer paso si mi sitio tiene permiso para el uso de notificaciones a través de window.Notifications.checkPermission() (línea 12), donde cero es «default» e indica que nuestro sitio tendría permitido las notificaciones. Hay otros dos valores posibles que son denied (1) y granted (2).

Si no tuvieramos permitido su uso pediríamos autorización al usuario a través de window.Notifications.requestPermission(); (línea 44), donde Chrome nos muestra un aviso dentro del navegador para aceptar o denegar la petición. Una vez que tengamos acceso estamos listos para la creación de notificaciones 😀 Para ello utilizaremos window.Notifications.createNotification (línea 17) definiendo cuál es el icono que quiero utilizar para mi ventana, el título de la misma y por último el contenido del cuerpo del mensaje. Con estos tres ingredientes ya estoy lista para llamar a createNotification y además definir una serie de eventos a los que mi notificación es sensible 🙂

Por último, una vez establecido qué es lo que quiero mostrar y cómo me puedo comportar, lanzamos el evento show (línea 39) para que la ventana sea mostrada 🙂

Si queréis probar este ejemplo en el navegador Chrome, podéis hacerlo a través del siguiente enlace.

Espero que haya sido de utilidad ¡y a esperar a que otros navegadores se animen!

¡Saludos!