Carregar um site pode ser uma experiência muito diferente dependendo da rede pelas condições 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 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 API Network Information que permite que aplicativos da Web acessem informações sobre a rede do usuário.
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.
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.