Veiculação adaptável com base na qualidade da rede

Milica Mihajlija

Carregar um site pode ser uma experiência muito diferente dependendo da rede pelas condições Geralmente tudo é tranquilo quando a rede é rápida, mas quando você está indo de um lugar para outro, com um plano de dados limitado e conexão instável, ou com um laptop em uma rede Wi-Fi lenta de cafeteria, a história é diferente.

Uma maneira de lidar com isso é adaptando os recursos que você veicula aos usuários com base na qualidade da conexão. Agora, isso é possível com o API Network Information que permite que aplicativos da Web acessem informações sobre a rede do usuário.

Compatibilidade com navegadores

• 61,00
• 79,00
• x
• x

Origem

Uso

Há muitas maneiras de usar as informações da rede para melhorar a experiência do usuário experiência:

• Alterne entre a exibição de conteúdo em alta e baixa definição com base no na rede do usuário.
• Decida se quer pré-carregar recursos.
• Adie uploads e downloads quando os usuários estiverem com uma conexão lenta.
• Ative o modo off-line se a qualidade da rede não for boa o suficiente para carregar o app e usar os recursos.
• Avisar aos usuários que fazer algo (por exemplo, assistir a um vídeo) pela rede celular pode custar dinheiro.
• Use-o nas análises para coletar dados sobre os a qualidade da rede.

Muitos aplicativos já estão fazendo algo semelhante. Por exemplo, YouTube, A Netflix e a maioria dos outros serviços de vídeo (ou videochamada) se ajustam automaticamente a resolução durante o streaming. Quando o Gmail está sendo carregado, ele fornece aos usuários para "carregar HTML básico (para conexões lentas)".

Como funciona

O objeto navigator.connection contém informações sobre o serviço uma conexão com a Internet. Suas propriedades são explicadas na tabela abaixo.

Propriedade	Explicação
downlink	Estimativa da largura de banda em megabits por segundo.
effectiveType	O tipo efetivo da conexão, com os valores possíveis 'slow-2g', '2g', '3g' ou '4g' (cobre 4g e mais). Determinado com base na combinação do tempo de retorno e da velocidade de downlink. Por exemplo, o downlink rápido combinado com alta latência terá um effectiveType menor devido à latência.
onchange	Um manipulador de eventos que é acionado quando as informações de conexão são alteradas.
rtt	A latência de ida e volta estimada da conexão em milissegundos.
saveData	Um booleano que define se o usuário solicitou um modo de uso de dados reduzido.

Veja como isso aparece quando você o executa no console do navegador:

Os valores effectiveType também estão disponíveis via Dicas do cliente e permitem que você comunique o tipo de conexão do navegador aos servidores.

Observação : é possível acessar a API Network Information dentro dos Service Workers para se adaptar a situações em que os usuários estão off-line.

O listener de eventos onchange permite que você se adapte dinamicamente às mudanças em a qualidade da rede. Se você adiou uploads ou downloads devido à má qualidade da rede condições, você pode confiar que o listener de eventos reiniciará a transferência quando detecta melhores condições de rede. Você também pode usá-lo para notificar os usuários quando o na qualidade da rede. Por exemplo, se o usuário perdesse o sinal Wi-Fi e estivesse for para uma rede celular, isso pode impedir transferências acidentais de dados (e 💸).

Use o listener de eventos onchange como faria com qualquer outro listener de eventos:

navigator.connection.addEventListener('change', doSomethingOnChange);

Observação : a API Network Information tem suporte em navegadores baseados no Chromium desde a versão 62.

Conclusão

Os possíveis benefícios da API Network Information são grandes, especialmente para para usuários em redes e aplicativos lentos que exigem muita largura de banda. Melhores de ela pode ser usada como uma técnica de aprimoramento progressivo.