No sé si usáis el chat de GMail normalmente, pero si lo usáis, y además usáis Chrome como navegador, cada vez que os escriben, independientemente de si estáis en GMail o no, independientemente de si el navegador está minimizado o no aparece una notificación en la pantalla.

Pues resulta que no es magia negra entre GMail y Chrome, si no que puedes hacerlo con simple Javascript. Chrome lleva con esta api bastante tiempo, y también posee una especificación más nueva (window.Notification).

Aún no es estándar, pero está en fase de WD (working draft). Actualmente sólo está implementado con chrome, pero es usable, ya que se pueden usar alternativas (como cambiar el título de la página dinámicamente) si no está disponible.

Uso básico

Su uso es simple:

var opciones = {
    iconUrl: "url_a_un_icono", /* (opcional) aún no implementado */
    body: "Contenido del cuerpo de la notificación", /* (opcional) si se omite el título será el cuerpo */
    tag: "etiqueta" /* (opcional) Nunca habrá dos notificaciones con la misma etiqueta, así que cuando se muestre se cerrarán las otras que tengan la misma etiqueta */
}
// Creamos la notificación
var notification = new window.Notification('Título', opciones);

// La mostramos
notification.show();

Para cerrarla luego podríamos hacer llamar al método notification.close() (o esperar a que el usuario haga click en el botón correspondiente):

Permisos

Para utilizar esta API hace falta solicitar permiso al usuario. Esta es una forma simple de hacerlo:

if( Notification.permission === 'default' ) {
    Notification.requestPermission(function(permission) {
        // callback
        if( permission === 'granted' ) {
            console.log("Permiso para usar notificaciones");
        }
    });

Eventos

Las notificaciones soportan los eventos onshow, onclose, onerror y onclick. Para mantener la compatibilidad con la primera implementación, al usar onshow habrá que especificarlo también como ondisplay.

var notification = new Notification('Título', opciones);

notification.onshow = notification.ondisplay = function() {
    alert("Se acaba de mostrar la notificación");
}

notification.onclose = function() {
    alert("¿Pero por qué la cierras?");
}

notification.onclick = function() {
    alert("Has hecho click");
}
notification.onerror = function() {
    alert("Ha ocurrido un error");
}

notification.show();

Compatibilidad con versiones antiguas

Chrome al principio implementó su propia versión, que requiere permisos, y no da la funcionalidad de tag. Para mantener la compatibilidad y poder usar la versión nueva, he creado un pequeño polyfill para que funcione en ambos casos (he incluido prefijos por si en algún momento se implementó la versión nueva con prefijos).

Demo

He creado una demo simple que con las opciones más básicas que puede haber, para demostrar su funcionamiento.

Para comprobar que aunque tengas minimizado el navegador la notificación aparecerá puedes hacer click en el segundo botón y minimizar rápido el navegador.

Demo