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

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

  • Chrome: 61.
  • Borda: 79.
  • Firefox: incompatível.
  • Safari: incompatível.

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)".

Um link para carregar a versão HTML básica do Gmail quando os usuários estiverem em 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:

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

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.

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);

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.