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 la red. condiciones. Por lo general, todo funciona sin problemas cuando la red es rápida, pero estés donde estés, con un plan de datos limitado y una conexión irregular, o atascado con una laptop conectada a una red Wi-Fi lenta en un café, es otra historia.

Una forma de abordar esto es adaptar los recursos que publicas para los usuarios según la calidad de su conexión. Ahora, esto es posible gracias al API de Network Information que permite a las aplicaciones web acceder 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 la red para mejorar la experiencia experiencia:

  • Cambia entre publicar contenido en alta definición y en baja definición según el la red del usuario.
  • Decide si quieres 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 suficiente para cargar la app y usar las funciones.
  • Advertirles a los usuarios que hacer algo (por ejemplo, mirar videos) con datos móviles podría costar dinero.
  • Úsala en tus estadísticas para recopilar datos sobre las contraseñas la calidad de la red.

Muchas aplicaciones ya están haciendo algo similar. Por ejemplo, YouTube, Netflix y la mayoría de los demás servicios de video (o videollamadas) se ajustan automáticamente la resolución durante la transmisión. Cuando Gmail se carga, proporciona a los usuarios una vínculo a "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 cuenta conexión. En la siguiente tabla, se explican sus propiedades.

Propiedad Explicación
downlink La estimación del ancho de banda en megabits por segundo.
effectiveType El tipo efectivo de conexión, con los valores posibles 'slow-2g', '2g', '3g' o '4g' (abarca 4 g y más). Se determina en función de la combinación del tiempo de ida y vuelta y la velocidad del enlace de bajada. Por ejemplo, un enlace de bajada rápido combinado con alta latencia tendrá un efectoType menor debido a la latencia.
onchange 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 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:

La consola de Herramientas para desarrolladores de Chrome muestra los valores de las propiedades del objeto navigator.connection.

Los valores de effectiveType también están disponibles mediante Client Hints y le permiten comunicar el tipo de conexión del navegador a los servidores.

El objeto de escucha de eventos onchange te permite adaptarte dinámicamente a los cambios en la calidad de la red. Si pospusiste las cargas o descargas debido a una mala conexión de red puedes confiar en que el objeto de escucha de eventos reiniciará la transferencia cuando detecta mejores condiciones de red. También puedes usarlo para notificar a los usuarios cuando los cambios en la calidad de la red. Por ejemplo, si perdieron la señal de Wi-Fi y sin conectar a una red móvil, esto puede evitar transferencias accidentales de datos (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, especialmente para usuarios con redes y aplicaciones lentas que necesitan mucho ancho de banda. Lo mejor de como una técnica de mejora progresiva.