Entrega adaptable según la calidad de la red

Milica Mihajlija

La carga de un sitio web puede ser una experiencia muy diferente según las condiciones de la red. Por lo general, todo funciona sin inconvenientes cuando estás conectado a una red rápida, pero cuando estás sobre la marcha con un plan de datos limitado y una conexión irregular, o con una laptop con una conexión Wi-Fi lenta en una cafetería, la historia es diferente.

Una forma de abordar este problema es adaptar los recursos que publicas a los usuarios según la calidad de su conexión. Esto ahora es posible con la API de Network Information, que permite que las aplicaciones web accedan a información sobre la red del usuario.

Navegadores compatibles

  • Chrome: 61.
  • Borde: 79.
  • Firefox: No es compatible.
  • Safari: no es compatible.

Origen

Uso

Existen muchas formas de usar esta información de red para mejorar la experiencia del usuario:

  • Cambia entre la entrega de contenido en alta definición y en baja definición según la red del usuario.
  • Decide si deseas precargar recursos.
  • Aplaza las cargas y descargas cuando los usuarios tengan una conexión lenta.
  • Habilita el modo sin conexión si la calidad de la red no es lo suficientemente buena para cargar la app y usar las funciones.
  • Advierte a los usuarios que realizar alguna acción (por ejemplo, mirar un video) a través de la red móvil podría costarles dinero.
  • Úsala en tus estadísticas para recopilar datos sobre la calidad de red de los usuarios.

Muchas aplicaciones ya hacen algo similar. Por ejemplo, YouTube, Netflix y la mayoría de los otros servicios de video (o videollamadas) ajustan automáticamente la resolución durante la transmisión. Cuando se carga Gmail, les proporciona a los usuarios un vínculo para "cargar HTML básico (para conexiones lentas)".

Un vínculo para cargar la versión en HTML básico de Gmail cuando los usuarios tengan conexiones lentas

Cómo funciona

El objeto navigator.connection contiene información sobre la conexión de un cliente. En la siguiente tabla, se explican sus propiedades.

Propiedad Explicación
downlink Es la estimación del ancho de banda en megabits por segundo.
effectiveType Es el tipo efectivo de la conexión, con los valores posibles 'slow-2g', '2g', '3g' o '4g' (incluye 4G y versiones posteriores). Se determina en función de la combinación de tiempo de ida y vuelta y velocidad de bajada. Por ejemplo, un vínculo descendente rápido combinado con una latencia alta tendrá un effectiveType más bajo debido a la latencia.
onchange Es un controlador de eventos que se activa cuando cambia la información de conexión.
rtt Es la latencia estimada de ida y vuelta de la conexión, expresada en milisegundos.
saveData Es un valor booleano que define si el usuario solicitó un modo de uso de datos reducido.

A continuación, se muestra cómo se ve esto cuando lo ejecutas en la consola del navegador:

Consola de Chrome DevTools que muestra los valores de las propiedades del objeto navigator.connection

Los valores effectiveType también están disponibles a través de las sugerencias del cliente y te permiten comunicar el tipo de conexión del navegador a los servidores.

El objeto de escucha de eventos onchange te permite adaptarte de forma dinámica a los cambios en la calidad de la red. Si aplazaste las cargas o descargas debido a condiciones de red deficientes, puedes confiar en el objeto de escucha de eventos para reiniciar la transferencia cuando detecte mejores condiciones de red. También puedes usarlo para notificar a los usuarios cuando cambia la calidad de la red. Por ejemplo, si pierde la señal de Wi-Fi y se cambia a una red celular, esto puede evitar transferencias de datos accidentales (y cargos 💸).

Usa el objeto de escucha de eventos onchange como lo harías con cualquier otro objeto de escucha de eventos:

navigator.connection.addEventListener('change', doSomethingOnChange);

Conclusión

Los beneficios potenciales de la API de Network Information son grandes, en especial para los usuarios de redes y aplicaciones lentas que requieren mucho ancho de banda. Lo mejor de todo es que se puede utilizar como una técnica de mejora progresiva.