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