A API de informações de rede

NetworkInformation

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.

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

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);

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. Independentemente do valor type, você pode obter uma estimativa da velocidade da conexão através da propriedade NetworkInformation.effectiveType.

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

• Eventos online e offline