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á em movimento com um plano de dados limitado e uma conexão instável ou preso com um laptop em um Wi-Fi lento 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 deles. Isso agora é possível com a API Network Information, que permite que os apps 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.
- Decidir se quer pré-carregar recursos.
- Adiar 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.
- Avise aos usuários que fazer algo (por exemplo, assistir vídeo) pela rede celular pode custar dinheiro.
- Use esse recurso na análise 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 videochamadas) ajustam automaticamente a resolução durante o streaming. Quando o Gmail está carregando, ele fornece 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 |
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' (cobre 4G e versões mais recentes). Determinado com base na combinação de tempo de retorno e velocidade de downlink. Por exemplo, o downlink rápido combinado com a 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 estimada de ida e volta da conexão, em milissegundos. |
saveData |
É um booleano que define se o usuário solicitou um modo de uso de dados reduzido. |
Veja a aparência do arquivo ao executá-lo no console do navegador:
Os valores de effectiveType também estão disponíveis nas Dicas de 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 na
qualidade da rede. Se você adiou uploads ou downloads devido a más condições
de rede, pode confiar no listener de eventos para reiniciar a transferência quando
detectar melhores condições de rede. Você também pode usá-lo para notificar os usuários quando a
qualidade da rede for alterada. Por exemplo, se o usuário perder o sinal de Wi-Fi e for
direcionado para uma rede celular, isso poderá evitar 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 possíveis benefícios 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 ela pode ser usada como uma técnica de aprimoramento progressivo.