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

Los sitios web y las aplicaciones web con contenido actualizado con frecuencia tienen que encontrar una manera de captar la atención de los usuarios para informarles de las actualizaciones, especialmente cuando los usuarios pueden haberse alejado de la pestaña donde el sitio web o la aplicación están activos.. 

Hay un par de patrones comunes que verás en la naturaleza. Los sitios web sociales como Facebook, Twitter y LinkedIn, que potencialmente reciben nuevo contenido cada pocos segundos, insertan el número relevante en el título de la página que muestra la cantidad de nuevas actualizaciones en la pestaña. Trello, por otro lado, muestra una pequeña insignia roja en el favicon.

Notificaciones de Trello, Facebook y Twitter.

En este tutorial, vamos a replicar esta forma de diseño de retroalimentación, haciendo uso de la pestaña del navegador como un medio para notificar a los usuarios de las actualizaciones. Echa un vistazo a la demostración y luego veamos cómo se hace..

Usando el título del documento

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

En un escenario del mundo real, podríamos recuperar datos de varias formas (hable con su desarrollador amigable). En este caso, asumiremos que hemos recuperado la cantidad de actualizaciones y tenemos disponible la cifra para jugar en JavaScript. Por ahora, parece que actualmente tenemos cero actualizaciones, por lo que pasaremos ese número a una variable:

cuenta var = 0;

La siguiente será la carne de nuestro código donde alteraremos el título del documento. En primer lugar, añadimos titulo del documento que recuperará el título de nuestro documento actual:

var title = document.title;

Luego creamos una nueva función para cambiar la cadena dentro de ese título:

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

Aquí puedes ver que usamos el JavaScript. ++ operador. A los efectos de nuestra demostración, el ++ aumentará nuestro contar número por 1 para cada iteración. Como empezamos con 0, la próxima iteración volverá 1. Usamos el ++ Operador para simular el incremento de número, ya que no tenemos acceso a una API para proporcionarnos un número real.

A continuación creamos otra nueva función que ejecutará el changeTitle () función:

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

La función anterior asume que necesitamos verificar nuevas actualizaciones cada 2000 milisegundos (2 segundos). Nuestra funcion, changeTitle (), se ejecutará continuamente dentro del intervalo. Ejecutamos esta función en cuanto se carga la página..

El primer método es bastante sencillo. Recuperamos el número y lo pasamos en el título. Puede cambiar los corchetes que envuelven el número de () a [] o cambiándolos en el changeTitle () función.

Usando el Favicon

Ahora vamos a probar el segundo enfoque, que es cambiar el favicon Al igual que la aplicación web Trello hace. Para esto, tendremos que preparar dos variantes de favicon, donde la segunda variante es la alternativa que mostraremos cada vez que recibamos nuevas actualizaciones..

Comienza por vincular el primer favicon dentro del documento..

A continuación, establezca la ruta del nuevo favicon en una variable de JavaScript.

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

Al igual que con el primer enfoque, 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 funcion, changeFavicon (), Reemplazará nuestro favicon inicial con el de la insignia roja. La segunda funcion, nueva actualización(), Ejecutará la primera función dentro del tiempo especificado..

Parece que hay algo nuevo para mirar!

El segundo enfoque no es tan complicado como puede haber pensado al principio; De hecho, es más sencillo que el primero en el que actualizamos la cadena de título de la página. Además, podemos verter más creatividad en el favicon alternativo. Por ejemplo, podríamos hacer la insignia roja. parpadeo en lugar de estar quieto (tenga cuidado ahora ...), o tal vez cambie todo el color y el icono del icono de favicon.

Nota: Chrome no admite favicons con GIF animado.

Usando Favico.js

Para terminar, ahora vamos a utilizar una biblioteca de JavaScript llamada Favico.js, desarrollada por Miroslav Magda. La biblioteca proporciona una API práctica con toneladas de opciones para modificar el favicon, como mostrar una insignia junto con la cantidad de actualizaciones en total.

Para empezar, utilizando JavaScript, definimos un nuevo Favico instancia que define la posición de la insignia, la animación, el color de fondo y el color del texto.

var favicon = new Favico (position: 'up', animación: 'popFade', bgColor: '# dd2c00', textColor: '# fff0e2'); 

Luego agregamos un par de funciones para ejecutar esta nueva instancia y, finalmente, mostrar el distintivo en el icono de mensaje..

var num = 0; función generateNum () num ++; número de retorno  función 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 se parece en algo al primer método que hicimos anteriormente. Comenzamos creando la función que hará simular El número de actualizaciones que mostraremos dentro de la placa. La segunda funcion, showFaviconBadge (), es insertar el número en el distintivo y mostrar el distintivo en el icono de mensaje. La ultima funcion nueva actualización() ejecutará la segunda función dentro del intervalo de tiempo especificado, lo que nos dará la sensación de recibir nuevas actualizaciones.

Conclusión

En este tutorial, hemos utilizado la pestaña del navegador como medio para notificar a los usuarios. Hemos replicado métodos que se aplican comúnmente en sitios web populares como Facebook, Twitter y Trello, además de evaluar sus limitaciones..

Una vez más, es probable que tenga que hacer un par de cambios para que se ajuste a su aplicación web en particular, pero los ejemplos aquí le dan un gran comienzo!