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

Milica Mihajlija

Carregar um site pode ser uma experiência muito diferente, dependendo das condições da rede. Tudo geralmente funciona bem quando você está em uma rede rápida, mas quando você está em trânsito com um plano de dados limitado e uma conexão instável ou com um laptop em uma rede Wi-Fi lenta de cafeteria, a história é outra.

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

Compatibilidade com navegadores

  • Chrome: 61.
  • Edge: 79.
  • Firefox: não é compatível.
  • Safari: incompatível.

Origem

Uso

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

  • Alterne entre a veiculação de conteúdo de alta e baixa definição com base na rede do usuário.
  • Decida se quer pré-carregar recursos.
  • Adie uploads e downloads quando os usuários estiverem em 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.
  • Avise os usuários que fazer algo (por exemplo, assistir vídeos) pela rede celular pode custar dinheiro.
  • Use-o nas suas análises para coletar dados sobre a qualidade da rede dos usuários.

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

Um link para carregar a versão em HTML básico do Gmail quando os usuários estiverem em conexões lentas

Como funciona

O objeto navigator.connection contém informações sobre a conexão de um cliente. As propriedades são explicadas na tabela abaixo.

Propriedade Explicação
downlink A estimativa de 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' (abrange 4G e versões mais recentes). Determinado com base na combinação do tempo de ida e volta e a velocidade de download. Por exemplo, o downlink rápido combinado com alta latência terá um effectiveType menor devido à latência.
onchange Um manipulador de eventos acionado quando as informações de conexão mudam.
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 fica quando você o executa no console do navegador:

Console do Chrome DevTools mostrando os valores das propriedades do objeto Navigator.connection

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

O listener de eventos onchange permite que você se adapte dinamicamente a mudanças na qualidade da rede. Se você tiver adiado uploads ou downloads devido a condições de rede ruins, use o listener de eventos para reiniciar a transferência quando ele detectar melhores condições de rede. Você também pode usá-lo para notificar os usuários quando a qualidade da rede mudar. Por exemplo, se o sinal de Wi-Fi for perdido e o dispositivo for transferido para uma rede celular, isso pode impedir transferências de dados acidentais (e cobranças 💸).

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

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

Conclusão

Os benefícios potenciais da API Network Information são grandes, especialmente para usuários em redes lentas e aplicativos que exigem muita largura de banda. O melhor de tudo é que ele pode ser usado como uma técnica de melhoria progressiva.