Cómo mostrar notificaciones de actualizaciones en la pestaña del navegador

Los sitios web y aplicaciones web que frecuentemente actualizan contenido tienen que buscar una forma de llamar la atención de los usuarios para señalarles las actualizaciones, particularmente donde los usuarios podrían haberse alejado de la pestaña donde está activo el sitio web o aplicación.

Hay un par de patrones comunes que verás en el escenario real. Sitios sociales tales como Facebook, Twitter, y Linkedin, que potencialmente reciben nuevo contenido en cuestión de segundos, insertan el número relevante en el título de la página indicando la cantidad de nuevas actualizaciones en la pestaña.  Trello,por otro lado, muestra un pequeño botón rojo en el favicon.

En éste tutorial, vamos a replicar ésta forma de diseño de retroalimentación haciendo uso de la pestaña del navegador como medio para notificar a usuarios sobre actualizaciones.  Observa el demo y luego veremos como se hizo.

Usando el Título del Documento

Comenzaremos al agregar el número de nuevas actualizaciones al título de la página, similar a como lo hacen Facebook y Twitter.

En el escenario del mundo real podríamos tomar datos en cualquier número de formas (habla con tu amigo desarrollador). En éste caso, asumiremos que hemos tomado el número de actualizaciones y tenemos la cifra a nuestro alcance para jugar con ella en Javascript.  Parece que por ahora tenemos cero actualizaciones, así que pasaremos ese número a una variable:

var count = 0;

Lo siguiente será el núcleo de nuestro código donde alteraremos el título del documento. Primero que nada, añadiremos document.title que tomará nuestro actual título de documento:

var title = document.title;

Luego crearemos una nueva función para cambiar el string dentro de ese título:

function changeTitle() {
  count++;
	var newTitle = '(' + count + ') ' + title;
	document.title = newTitle;
}

Aquí puedes ver que usamos el operador ++ de Javascript. Para propósitos de nuestra demostración el ++ incrementará nuestro número count (contador) en uno para cada iteración.  Como comenzamos en cero, la próxima iteración regresará 1. Usamos el operador ++ para simular el incremento de número, ya que no tenemos acceso a una API para que nos proporcione un número real.

Posteriormente creamos otra función que ejecutará la función changeTitle():

function newUpdate() {
	update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

La función de arriba asume que necesitamos nuevas actualizaciones cada 2000 milisegundos (2 segundos). Nuestra función, changeTitle(), se ejecutará continuamente en el intervalo. Nosotros ejecutamos ésta función tan pronto como se recargue la página.

El primer método es muy simple. Tomamos el número y lo pasamos al título. Puedes cambiar los corchetes que encierran el número de () a [] o {} al cambiarlos en la función changeTitle().

Usando el Favicon.

Ahora vamos a intentar el segundo planteamiento, que es cambiar el favicon como lo hace la aplicación web de Trello. Para ésto, necesitaremos preparar dos variantes de favicon, donde la segunda variante es la alternativa que mostraremos cuando recibamos nuevas actualizaciones.

Comenzamos con enlazar el primer favicon dentro del documento.

<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>

Luego establecemos la ruta del nuevo favicon en una variable Javascript.

var iconNew = 'img/favicon-dot.gif';

Al igual que en el primer planteamiento, también crearemos dos funciones:

function changeFavicon() {
	document.getElementById('favicon').href = iconNew;
}
function newUpdate() {
	update = setInterval(changeFavicon, 3000);
	setTimeout(function() { 
		clearInterval( update ); 
	}, 3100);
}

var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

La primera función, changeFavicon(), remplazará nuestro favicon inicial con el del botón rojo. La segunda función, newUpdate(), ejecutará la primera función dentro del tiempo especificado.

El segundo planteamiento no es tan complicado como pudiera parecer en primera instancia; es, de hecho, más sencillo que el primero donde actualizamos el string del título de la página. Adicionalmente, podemos poner mas creatividad en el favicon alterno. Por ejemplo, pudimos hacer el botón rojo intermitente en lugar de que estuviera quieto (ahora ten cuidado...), o quizá cambia el color y el ícono entero del favicon.

Nota: Chrome no soporta faviconos con GIFs animados.

Usando Favico.js

Para finalizar, ahora utilizaremos una librería Javascript llamada Favico.js,desarrollada por Miroslav Magda. La librería proporciona un útil API con muchísimas opciones para alterar el favicon tal como mostrar un botón junto con el número de actualizaciones.

Para comenzar, usando Javascript, definimos una nueva instancia de Favico que define la posición del botón, la animación, el color de fondo así como el color del texto.

var favicon = new Favico({
	position  :'up',
	animation :'popFade',
	bgColor   :'#dd2c00',
	textColor :'#fff0e2'
});

Posteriormente añadimos un par de funciones para ejecutar ésta nueva instancia y finalmente mostramos el botón en el favicon.

var num = 0;
function generateNum() {
	num++;
	return num;
}

function showFaviconBadge() {
	var num = generateNum();
	favicon.badge(num);	
}

function newUpdate() {
	update = setInterval(showFaviconBadge, 2000);
}

var docBody  = document.getElementById('site-body');
docBody.onload = newUpdate;

El código en algo se asemeja al primer método que utilizamos previamente. Comenzamos creando la función que simulará el número de actualizaciones que mostraremos en el botón.  La segunda función, showFaviconBadge(), es para insertar el número en el botón y mostrar el botón en el favicon. La última función newUpdate() ejecutará la segunda función en el intervalo de tiempo especificado, dándonos una sensación de recibir nuevas actualizaciones.

Conclusión

En éste tutorial, hemos usado la pestaña del navegador como un medio de notificación para los usuarios. Hemos replicado métodos que son comúnmente aplicados en sitios web populares como Facebook, Twitter, y Trello junto con la evaluación de sus limitaciones.

De nuevo, probablemente tendrás que efectuar un par de cambios para que encaje en tu aplicación web particular, pero los ejemplos que viste aquí ¡te ayudarán a tener un gran inicio!.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!