É comum usar a largura da tela ou indicadores semelhantes para decidir quantos dados mostrar ao usuário. Mas, às vezes, um usuário com uma tela maior ou dispositivo de maior resolução tem uma conexão de rede ruim, e enviá-las para imagens maiores torna as coisas muito mais lentas para eles no carregamento do site. Seria ótimo se pudéssemos explicar as condições de rede de um usuário específico para determinar o que devemos enviá-las.
A API de informações da rede faz exatamente isso. É uma API que fornece informações sobre a conexão do sistema em termos ou tipo de conexão (por exemplo, “wifi”, “celular” etc.) que podemos usar para otimizar a experiência deles.
Acessar dados do objeto Navegador
Navigator.connection é a propriedade principal que analisaremos. É somente leitura e contém algumas informações potencialmente valiosas sobre a conexão do usuário.
let connectionInfo = navigator.connection;
Isso retorna um objeto que possui as seguintes propriedades.
Propriedades da API Network Information
- Downlink: Retorna a estimativa de largura de banda efetiva em megabits por segundo.
- DownlinkMax: Retorna a velocidade máxima de downlink para a tecnologia de conexão subjacente.
- EffectiveType: retorna o tipo de conexão efetivo que significa uma das opções “slow-2g”, “2g”, “3g” ou “4g”.
- Rtt: Retorna o tempo de ida e volta estimado estimado da conexão atual.
- Type: retorna o tipo de conexão que um dispositivo está usando para se comunicar com a rede.
- Inclui: “bluetooth, celular, ethernet, nenhum, wifi, wimax, outro, desconhecido”.
Nota: Atualmente, os navegadores de desktop não retornam as propriedades downlinkMax e type.
Eventos
Também podemos adicionar listeners para o evento “onchange”, que dispara quando as informações de conexão são alteradas.
Exemplos
O benefício óbvio de ter essas informações é que podemos personalizar a experiência do usuário não apenas com base no tamanho da tela, mas também em como o usuário está se conectando ao nosso site. É sobre wi-fi ou celular? É um 3g ou 4g, etc?
let preloadVideo = true;
let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
if (connection.type === 'cellular') {
preloadVideo = false;
}
}
Por exemplo, poderíamos determinar se pré-carregaremos os ativos com uso intensivo de recursos, como vídeo, com base na conexão de rede, decidindo não pré-carregar os recursos se eles estiverem em excesso no celular.
Suporte
Infelizmente, o suporte para essa API é mínimo no momento, com o Chrome e o Opera sendo os principais navegadores para suporte a dispositivos móveis e o Chrome para computador.
A boa notícia, porém, é que, embora não possamos usar isso para todos, ainda podemos usá-lo para melhorar progressivamente nossos sites para alguns de nossos usuários. E com os benefícios potenciais que poderia oferecer quando estiver amplamente disponível, é definitivamente uma API para ficar de olho em seguir em frente.
Fonte:
MDN Docs: NetworkInformation
MDN Docs: Navigator.connection
Tradução principal: https://www.afasterweb.com/2018/01/26/network-api/