cursor

Queríamos compartir con ustedes algunas mejoras que implementamos en la nueva versión del Panel de Control de Mango.

Este es el primero de una serie de artículos en los que vamos a estar compartiendo diferentes técnicas que implementamos para mejorar la experiencia en el Panel de Mango utilizando nuevas tecnologías web.

Expiración de sesiones (es por tu bien)

Parte de las medidas de seguridad que utilizamos en el Panel de Control desde el primer momento incluyen el uso de sesiones de usuario que expiran luego de 15 minutos de inactividad.

Esta nueva versión del Panel de Control de Mango incorporó funcionalidades en las cuales los usuarios pueden estar un tiempo prolongado analizando métricas, reportes de sus transacciones o realizando acciones que pueden no necesariamente notificar a nuestros servidores.

Por dicho motivo implementamos un mecanismo de envío de mensajes de keep-alive para avisarle a los servidores de Mango que la sesión sigue activa (esto contempla eventos de mouse, teclado, etc.).

Este mecanismo también se encarga de expirar la sesión si ningún evento es disparado durante dichos 15 minutos. Antes de desactivar la sesión automáticamente, el usuario tiene la opción de «mantener viva» la sesión clickeando un modal que advierte su pronta expiración.

bert

Luego de realizar diferentes pruebas, nos dimos cuenta que la técnica utilizada para expirar la sesión tenía dos puntos débiles en relación a la experiencia del usuario:

  • Si un usuario tenía abierto el panel en más de una pestaña (tab), la actividad de una pestaña no era registrada por sus pestañas hermanas. Es decir, darle más vida a una instancia del panel en una pestaña no afectaba el tiempo de vida client-side del resto.
  • El usuario no tenía forma de saber si el tiempo estaba por agotarse en caso de estar navegando otras pestañas u otras aplicaciones que no estén relacionadas al Panel de Mango.

La experiencia de usuario es uno de nuestros pilares como compañía y es por eso que pensamos técnicas para poder mitigar estos puntos.

El problema de las «tabs hermanas»

Para conocer el uso actual de las distintas instancias del panel (tabs) al mismo tiempo y sincronizar los tiempos de vida de las sesiones, acudimos a un truco de un viejo amigo: localStorage (IE8+).

Un uso poco conocido de la API de localStorage es que el objeto window emite el evento storage al resto de los tabs con el mismo esquema (según CSP).

Este truco es muy útil a la hora de enviar mensajes entre las tabs que controlamos. Utilizando esta API del navegador es muy simple notificar a las otras instancias de la aplicación cada vez que un evento de keep-alive se dispara en un tab.

// Para que se ejecute el evento 'storage', se debe setear un valor distinto al anterior.
// Es por eso que usamos 'new Date()'.
localStorage.setItem('keep-alive', (+new Date()) + '');

...

// En otra parte de la aplicación
window.addEventListener('storage', function(eve) {
  if (eve.key === 'keep-alive' && isActive()) {
    refreshSession();
  }
}, false);

De este modo, manteniendo «viva» una sola sesión nos aseguramos de mantener el resto «vivas» también.

Notificaciones para todos

Gran cantidad de navegadores ya implementaron un método para poder notificar a los usuarios de eventos importantes cuando no están activamente usando nuestra aplicación o incluso cuando tienen el navegador minimizado.

Se llaman Web Notifications y varias aplicaciones ya están comenzando a utilizar este patrón aprovechando su gran poder para mejorar la experiencia de aquellos usuarios que utilizan navegadores modernos.

Las Web (o Desktop) Notifications nos permiten disparar notificaciones nativas del sistema operativo a través del navegador. A continuación podrán ver nuestra notificación previo a que expire la sesión:

desktop-notification-v2

Con una porción muy pequeña de código (como la del ejemplo a continuación) lograremos captar la atención del usuario para que realize la acción de «mantener viva» la sesión en caso de que quiera hacerlo. Adicionalmente, tenemos la posibilidad de redireccionar al usuario directamente a la pestaña en la que se emitió el evento cuando hace click en la notificación.

const desktopNotification = (title, options={}) => {
  if (document.hidden && 'Notification' in window) {
    const notification = new Notification(title, options);
    notification.onclick = () => { try { window.focus(); } catch(e) {} };
    return notification;
  }
};

Conclusión

Es muy importante conocer y tener en cuenta las tecnologías disponibles hoy en día y aprovecharlas al máximo para mejorar la experiencia de nuestros usuarios. En nuestro caso, de manera simple pudimos implementar dos soluciones que tienen un valor agregado para la experiencia de los usuarios en nuestro producto.

En el próximo artículo hablaremos sobre como utilizando nuevas tecnologías podemos achicar la brecha entra las aplicaciones web y el mundo móvil.

Cualquier duda/comentario o experiencias que quieran compartir, nos pueden contactar vía Twitter a @impronunciable o @pazguille.