Neste codelab, você vai aprender a adaptar seu conteúdo com base na qualidade da rede. O vídeo em segundo plano desta página será carregado somente quando os usuários estiverem em uma rede rápida. Em redes mais lentas, uma imagem será carregada.
A
API Network Information
permite acessar informações sobre a qualidade da conexão do usuário. Você usará a propriedade effectiveType para decidir quando exibir um vídeo e quando uma imagem. effectiveType pode ser 'slow-2g', '2g', '3g' ou '4g'.
Etapa 1: verificar o tipo de conexão
O arquivo index.html contém uma tag <video> para exibir o vídeo em segundo plano (linha 22). O código em script.js carrega o vídeo definindo o atributo src da tag de vídeo. O código de carregamento do vídeo é descrito em mais detalhes na Etapa 2.
Para carregar o vídeo condicionalmente, primeiro verifique se a API Network Information está disponível. Se estiver, verifique o tipo de conexão.
- No
script.js, adicione uma instruçãoifque testa se o objetonavigator.connectionexiste e se ele tem a propriedadeeffectiveType. - Adicione uma instrução
ifpara verificar oeffectiveTypeda rede.
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.
}
}
Una o código de carregamento de vídeo existente em uma instrução else para que o vídeo ainda
seja carregado em navegadores que não oferecem suporte à API 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');
}
Etapa 2: carregar o vídeo
Se effectiveType for '4g', use o código de carregamento de vídeo do
início do 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
}
O código de carregamento do vídeo funciona: a tag <video> não faz o download nem exibe nada no início porque o atributo src não está definido. O URL do vídeo a ser carregado é especificado usando o atributo data-src.
<video id="coverVideo" autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
Atributos de dados permitem armazenar informações extras sobre elementos HTML padrão. Um elemento de dados pode ter qualquer nome, desde que comece com "data-".
Para mostrar o vídeo na página, você precisa definir o valor de data-src como o atributo src do elemento de vídeo.
Primeiro, pegue o elemento DOM que contém o recurso:
const video = document.getElementById('coverVideo');
Em seguida, receba o local do recurso no atributo data-src:
const videoSource = video.getAttribute('data-src');
Por fim, defina isso como o atributo src do elemento de vídeo:
video.setAttribute('src', videoSource);
A última linha cuida do posicionamento do CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
Etapa 3: carregar a imagem
Para carregar condicionalmente uma imagem em redes mais lentas, use a mesma estratégia do vídeo.
Adicione um elemento de imagem à index.html (logo após o elemento de vídeo) e use
o atributo data-src em vez do 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" />
Em script.js, adicione o código para definir o atributo src da imagem, dependendo do
effectiveType da rede.
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');
}
Testar
Para testar por conta própria:
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
. - Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Clique na lista suspensa Limitação, que é definida como Sem limitação por padrão. Selecione 3G rápido.
Agora atualize a página com a conexão 3G rápida ativada. O app carrega uma imagem em segundo plano em vez do vídeo:
Crédito extra: responda às alterações
Lembra como essa API tem um
listener de eventos onchange?
Você pode usá-lo para muitas coisas:
Este é um exemplo simples de como usar esse listener. Adicionar a script.js. Esse código chamará a função displayNetworkInfo sempre que as informações da rede mudarem.
navigator.connection.addEventListener('change', displayNetworkInfo);
Já há um elemento <h2> vazio na página index.html. Agora defina a
função displayNetworkInfo para que ela mostre as informações da rede no elemento
<h2> e invoque a função.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Este é o estado final do app no Glitch.
Para testar novamente:
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
.
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Clique na lista suspensa Limitação, que é definida como Sem limitação por padrão. Selecione 3G rápido.
- Atualize o app.
O app atualizará as informações de rede para 3g:
