Cargar un sitio web puede ser una experiencia muy diferente según las condiciones de la red. Todo suele funcionar sin problemas cuando estás en una red rápida, pero cuando estás sobre la marcha con un plan de datos limitado y una conexión irregular, o si usas una laptop en una red Wi-Fi lenta en una cafetería, la historia es diferente.
Una forma de lidiar con esto es adaptar los recursos que entregas a los usuarios en función de la calidad de su conexión. Ahora, esto es posible con la API de Network Information, que permite que las aplicaciones web accedan a información sobre la red del usuario.
Uso
Existen muchas formas de usar esta información de red para mejorar la experiencia del usuario:
- Alterna entre la entrega de contenido de alta definición y de baja definición según la red del usuario.
- Decide si quieres precargar recursos.
- Aplaza 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 hacer algo (por ejemplo, mirar videos) mediante datos móviles podría costarles dinero.
- Úsalo en tus estadísticas para recopilar datos sobre la calidad de la red de tus usuarios.
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) ajustan automáticamente la resolución durante la transmisión. Cuando Gmail se está cargando, proporciona a los usuarios un vínculo para “cargar HTML básico (para conexiones lentas)”.
Cómo funciona
El objeto navigator.connection contiene información sobre la conexión de un cliente. Sus propiedades se explican en la siguiente tabla.
| Propiedad | Explicación |
|---|---|
downlink |
Es la estimación del ancho de banda en megabits por segundo. |
effectiveType |
El tipo efectivo de la conexión, con valores posibles 'slow-2g', '2g', '3g' o '4g' (abarca 4 g y versiones posteriores). Se determina en función de la combinación del tiempo de ida y vuelta y la velocidad de enlace de bajada. Por ejemplo, un enlace de bajada rápido combinado con latencia alta tendráEffectiveType más bajo debido a la latencia. |
onchange |
Un controlador de eventos que se activa cuando cambia la información de conexión. |
rtt |
Es la latencia de ida y vuelta estimada 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 cuando lo ejecutas en la consola del navegador:
Los valores de effectiveType también están disponibles a través de Client Hints 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 cambie la calidad de la red. Por ejemplo, si perdieron la señal de Wi-Fi y se conectaron 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, 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.