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

O carregamento de um site pode ser uma experiência muito diferente, dependendo das condições da rede. Geralmente, tudo é tranquilo quando você está em uma 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 travado com um laptop em uma rede Wi-Fi lenta, a história é outra.

Uma maneira de lidar com isso é adaptar os recursos que você está veiculando para os usuários com base na qualidade da conexão deles. Isso agora é 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: incompatível.
  • Safari: não é compatí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 está carregando, ele oferece 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. Suas 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 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.

Confira como fica quando você 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. Também é possível 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.