Network Information API para contenido adaptable: guía de respaldo
Aprende cómo navigator.connection puede orientar la elección de recursos, cómo tratar las sugerencias ausentes o cambiantes y cómo respetar la privacidad.
Quieres la documentación estructurada de Plataforma?
Este artículo forma parte de la biblioteca editorial. Para pasos de configuración, material de referencia y actualizaciones continuas, entra en la sección de docs.
La Network Information API ofrece a una página indicios aproximados sobre la conexión actual mediante navigator.connection. Una aplicación puede usarlos para elegir una política de recursos, pero son estimaciones opcionales, no una promesa de rendimiento ni una identidad de usuario. El patrón resistente empieza con una experiencia completa, detecta la función y hace reversible cualquier reducción.
Qué expone la API
El objeto NetworkInformation puede exponer effectiveType, rtt, downlink, saveData y, cuando está implementado, type. effectiveType agrupa las condiciones observadas en valores como slow-2g, 2g, 3g y 4g. rtt es una estimación del tiempo de ida y vuelta en milisegundos, y downlink una estimación de megabits por segundo. saveData refleja que la persona pidió reducir el uso de datos. Son indicios calculados por el navegador y reducidos por privacidad, no una medición permanente del ancho de banda disponible.
La compatibilidad y la precisión varían. Trata navigator.connection como una capacidad opcional y comprueba cada propiedad antes de usarla. Si falta el objeto, no existe una propiedad o el valor es inesperado, el contenido y los controles necesarios deben seguir funcionando.
Patrón de adaptación progresiva
Define una política base que funcione sin ningún indicio de red. Después usa pocas variantes con nombre, como baseline, reduced y enhanced, para decisiones acotadas: aplazar un vídeo no esencial, elegir un candidato de imagen que ya forme parte del conjunto responsive o posponer una precarga opcional. Conserva el contenido semántico y los controles accesibles.
const connection = navigator.connection;
const slow =
connection && (connection.saveData || connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');
const policy = slow ? 'reduced' : 'baseline';
// Aplica una elección reversible; el contenido necesario sigue cargando.
No conviertas un solo indicio en una barrera de compatibilidad. Un valor 4g no garantiza que una transferencia grande termine, y la ausencia del valor no demuestra que la conexión sea lenta. Ajusta la política a partir de resultados reales como finalización, errores de decodificación, cancelación y latencia de entrada.
Reaccionar a cambios
El objeto de conexión puede emitir un evento change. Si lo escuchas, ajusta el trabajo opcional en lugar de retirar contenido ya disponible. Cancela o pausa una mejora pendiente cuando empeoren las condiciones y ofrece un reintento claro cuando mejoren. Aplica debounce para que una estimación fluctuante no provoque descargas repetidas.
Mantén la adaptación dentro de la tarea actual. Si una persona solicita explícitamente un documento en resolución completa, debe poder continuar después de una advertencia comprensible o una carga progresiva. La preferencia de ahorro de datos es una señal útil, pero es distinta del resultado de red y no debe anular silenciosamente una elección clara.
Privacidad y límites del servicio
Los indicios de red pueden aumentar una huella digital al combinarse con otras señales. Úsalos de forma efímera para elegir una política de recursos. Por defecto, no guardes rtt, downlink ni effectiveType sin procesar en identificadores de cuenta, registros duraderos o analítica. Si el servicio necesita una preferencia remota, envía una elección temporal como reduced, explica su efecto y evita conservar el valor del navegador.
Una adaptación que cambie lo que se sube o descarga requiere una explicación visible y una elección explícita. Una imagen de menor calidad o una precarga aplazada es una decisión de producto, no autorización para recopilar más datos. Las solicitudes, permisos y decisiones de cuenta necesarias deben ser independientes de esta API.
Pruebas y respaldo duradero
Prueba con navigator.connection ausente, con solo algunas propiedades, con saveData activado y con un evento change durante una transferencia interrumpida. Comprueba el comportamiento, no un número concreto: el texto necesario sigue siendo legible, los controles de teclado siguen disponibles y el trabajo opcional se recupera sin bucles de reintento. Prueba también un navegador que exponga la API pero indique unknown como tipo.
Las imágenes responsive, la carga diferida, el backpressure de streams, las cachés acotadas y la cancelación siguen siendo útiles sin esta API. Documenta los nombres y límites de las políticas, revísalos después de cambios del navegador o de la carga y registra resultados, no clasificaciones de hardware o red.
La guía sobre fingerprinting de Network Information explica las consecuencias de privacidad. La guía sobre fingerprinting de Client Hints explica por qué las sugerencias visibles en las solicitudes deben coincidir con la política de la página.
Fuentes
Artículos Relacionados
Lleva BotBrowser de la investigación a producción
Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.