Neste codelab, você vai aprender a adaptar seu conteúdo com base na qualidade da rede. O vídeo de plano de fundo dessa página só será carregado 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 veicular 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 mostrar 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 de 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.
- Em
script.js
, adicione uma instruçãoif
que teste se o objetonavigator.connection
existe e se ele tem a propriedadeeffectiveType
. - Adicione uma instrução
if
para verificar aeffectiveType
da 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.
}
}
Encapsule o código de carregamento de vídeo atual 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 o 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
}
Confira como o código de carregamento de 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" 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>
Os atributos de dados permitem armazenar informações extras em elementos HTML padrão. Um elemento de dados pode ser nomeado como quiser, desde que comece com "data-".
Para exibir o vídeo na página, é necessário extrair o valor de data-src
e defini-lo 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 do atributo data-src
:
const videoSource = video.getAttribute('data-src');
E, 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 a index.html
(logo após o elemento de vídeo) e use
o atributo data-src
em vez do 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');
}
Faça um teste
Para testar:
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Clique no menu suspenso Limitação, que é definido como Sem limitação por padrão. Selecione 3G rápido.
Agora, atualize a página com a conexão 3G rápida ainda ativada. O app carrega uma imagem em segundo plano em vez do vídeo:
Crédito extra: responder às mudanças
Lembra que essa API tem um ouvinte de eventos
onchange
?
Ele pode ser usado para muitas coisas: adaptar dinamicamente o conteúdo, como a qualidade do vídeo; reiniciar transferências de dados adiadas quando uma mudança para um tipo de rede de alta largura de banda é detectada; ou notificar os usuários quando a qualidade da rede muda.
Veja um exemplo simples de como usar esse listener. Adicione a script.js
. Esse
código vai chamar a função displayNetworkInfo
sempre que as informações
da rede mudarem.
navigator.connection.addEventListener('change', displayNetworkInfo);
Já existe um elemento <h2>
vazio na página index.html
. Agora, defina a
função displayNetworkInfo
para que ela mostre as informações de 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 View App. Em seguida, pressione Fullscreen .
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Clique no menu suspenso Limitação, que é definido como Sem limitação por padrão. Selecione 3G rápido.
- Atualize o app.
O app vai atualizar as informações de rede para 3G: