A API de informações de rede

Experimental: Esta é uma tecnologia experimental (en-US)
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A API de informações de rede fornece informações sobre a conexão do sistema em termos de tipo de conexão geral (por exemplo, 'wifi, 'celular' etc.). Isso pode ser usado para selecionar conteúdo de alta definição ou conteúdo de baixa definição com base na conexão do usuário.

A interface consiste em um único objeto NetworkInformation (en-US), cuja instância é retornada pela propriedade Navigator.connection (en-US).

Note: This feature is available in Web Workers.

Interfaces

NetworkInformation (en-US)

fornece informações sobre a conexão que um dispositivo está usando para se comunicar com a rede e fornece um meio para que os scripts sejam notificados se o tipo de conexão for alterado. A interface NetworkInformation não pode ser instanciada. Em vez disso, é acessado através da interface Navigator (en-US).

Exemplos

Detectar alterações de conexão

Este exemplo observa as alterações na conexão do usuário.

js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `Tipo de conexão alterado de ${type} para ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);

Pré-carregue grandes recursos

O objeto de conexão é útil para decidir se deve pré-carregar recursos que consomem grandes quantidades de largura de banda ou memória. Este exemplo seria chamado logo após o carregamento da página para verificar um tipo de conexão em que o pré-carregamento de um vídeo pode não ser desejável. Se uma conexão de celular for encontrada, o sinalizador preloadVideo será definido como false. Para simplicidade e clareza, este exemplo testa apenas um tipo de conexão. Um caso de uso do mundo real provavelmente usaria uma instrução switch ou algum outro método para verificar todos os valores possíveis de NetworkInformation.type (en-US). Independentemente do valor type, você pode obter uma estimativa da velocidade da conexão através da propriedade NetworkInformation.effectiveType (en-US).

js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}

Especificações

Specification
Network Information API

Compatibilidade do navegador

api.NetworkInformation

BCD tables only load in the browser

api.Navigator.connection

BCD tables only load in the browser

Veja também