En este codelab, aprenderás a adaptar tu contenido en función de la calidad de la red. El video de fondo de esta página se cargará solo cuando los usuarios tengan una red rápida. En redes más lentas, se cargará una imagen.
La API de Network Information te permite acceder a información sobre la calidad de la conexión del usuario. Usarás su propiedad effectiveType
para decidir cuándo publicar un video y cuándo una imagen. effectiveType
puede ser 'slow-2g'
, '2g'
, '3g'
o '4g'
.
Paso 1: Comprueba el tipo de conexión
El archivo index.html
contiene una etiqueta <video>
para mostrar el video de fondo (línea 22). El código en script.js
carga el video configurando el atributo src
de la etiqueta de video. (El código de carga de video se describe con más detalle en el Paso 2).
Para cargar el video de forma condicional, primero verifica si la API de Network Information está disponible. Si es así, verifica el tipo de conexión.
- En
script.js
, agrega una sentenciaif
que pruebe si existe el objetonavigator.connection
y si tiene la propiedadeffectiveType
. - Agrega una sentencia
if
para verificar eleffectiveType
de la red.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Only load video on the fastest connections.
} else {
// In any other case load the image.
}
}
Une el código de carga de video existente en una sentencia else
para que el video se siga cargando en navegadores que no sean compatibles con la API de Network Information.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// video loading code
} else {
// image loading code
}
} else {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Paso 2: Carga el video
Si effectiveType
es '4g'
, usa el código de carga de video del comienzo del codelab.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
// image loading code
}
Así es como funciona el código de carga de video: la etiqueta <video>
no descarga ni muestra nada al principio porque no se configuró su atributo src
. La URL del video que se carga se especifica con el atributo data-src
.
<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
Los atributos de datos te permiten almacenar información adicional en elementos HTML estándar. Se puede asignar cualquier nombre a un elemento de datos, siempre y cuando comience con “data-”.
Para mostrar el video en la página, debes obtener el valor de data-src
y configurarlo como el atributo src
del elemento de video.
Primero, obtén el elemento DOM que contiene el recurso:
const video = document.getElementById('coverVideo');
Luego, obtén la ubicación del recurso desde el atributo data-src
:
const videoSource = video.getAttribute('data-src');
Por último, configúralo como el atributo src
del elemento de video:
video.setAttribute('src', videoSource);
La última línea se encarga del posicionamiento de CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
Paso 3: Carga la imagen
Para cargar condicionalmente una imagen en redes más lentas, usa la misma estrategia que para el video.
Agrega un elemento de imagen a index.html
(justo después del elemento de video) y usa el atributo data-src
en lugar del atributo src
.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
En script.js
, agrega código para establecer el atributo src
de la imagen según el effectiveType
de la red.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
const image = document.getElementById('coverImage');
const imageSource = image.getAttribute('data-src');
image.setAttribute('src', imageSource);
image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Probar
Para probarlo por tu cuenta, sigue estos pasos:
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
- Haga clic en la pestaña Red.
- Haz clic en el menú desplegable Limitación, que se establece en Sin limitación de forma predeterminada. Selecciona 3G rápida.
Ahora, vuelve a cargar la página con la limitación rápida de 3G habilitada. La app carga una imagen en segundo plano en lugar del video:
Crédito adicional: Responder a cambios
¿Recuerdas que esta API tiene un objeto de escucha de eventos onchange
?
Puedes usarlo para muchas cosas: adaptar contenido de forma dinámica, como la calidad de video; reiniciar transferencias de datos diferidas cuando se detecta un cambio a un tipo de red de gran ancho de banda; o notificar a los usuarios cuando cambia la calidad de la red.
Este es un ejemplo sencillo de cómo usar este objeto de escucha. Agrégala a script.js
. Este código llamará a la función displayNetworkInfo
cada vez que cambie la información de la red.
navigator.connection.addEventListener('change', displayNetworkInfo);
Ya hay un elemento <h2>
vacío en la página index.html
. Ahora, define la función displayNetworkInfo
para que muestre la información de la red en el elemento <h2>
y la invoque.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Este es el estado final de la app en Glitch.
Para volver a probarla, haz lo siguiente:
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
- Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
- Haz clic en el menú desplegable Limitación, que se establece en Sin limitación de forma predeterminada. Selecciona 3G rápida.
- Vuelve a cargar la app.
La app actualizará la información de la red a 3g: