Você pode usar o JavaScript para verificar se o seu aplicativo está conectado à Internet?

Neste artigo, fornecerei uma resposta atualizada para esta pergunta de detecção de conexão com a Internet. (Ufa! Diga isso rápido cinco vezes!)

A solução usará a API Fetch do JavaScript e o código assíncrono com Async & Await. Mas primeiro, vamos olhar para uma solução aceita e discutir por que ela pode não ser a melhor opção para seu aplicativo.

A propriedade online da interface do navegador, navigator.onLine, é freqüentemente usado para detectar o status online e offline do navegador.

Combinado com ouvintes para eventos online e offline, parece fornecer uma solução simples para desenvolvedores que é fácil de implementar.

Vejamos como implementamos o navegador.onLine

Comece adicionando um ouvinte de evento de carregamento. Quando o evento de carregamento é acionado, o ouvinte verifica a propriedade online da interface do navegador e exibe o status online.

A propriedade online do navegador fornece uma resposta booleana (verdadeira ou falsa). Para concluir a ação do ouvinte, usaremos uma declaração ternária para definir o valor de exibição do status.

window.addEventListener("load", (event) => {  const statusDisplay = document.getElementById("status");  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";});

Então, por que a palavra navegador? Bem, é uma referência ao navegador Netscape Navigator dos anos 90.

Centralize um elemento h1 na sua página HTML com o ID de “status”. Se você aplicar o código JavaScript acima à sua página, deverá vê-lo exibir “Online”.

Mas isso só atualiza o elemento h1 quando a página é carregada. Vamos adicionar ouvintes de eventos offline e online para atualizar a exibição do status a qualquer momento em que um desses eventos for acionado.

window.addEventListener("offline", (event) => {  const statusDisplay = document.getElementById("status");  statusDisplay.textContent = "OFFline";});window.addEventListener("online", (event) => {  const statusDisplay = document.getElementById("status");  statusDisplay.textContent = "Online";});

Podemos ir para a guia Aplicativo do Chrome Dev Tools e clicar em ServiceWorker para configurar o navegador para responder como se estivesse offline.

Marque e desmarque a caixa de seleção Off-line algumas vezes. Você deve ver a exibição do status responder imediatamente aos eventos offline e online disparados.

offline check nav online
Ferramentas de desenvolvimento do Chrome> guia Aplicativo> Trabalhadores em serviço> Caixa de seleção offline

Vamos cavar um pouco mais fundo

Na primeira impressão, o acima exposto parece ser uma boa solução que é bastante simples. Infelizmente, à medida que lemos mais sobre a propriedade online do navegador e os eventos online e offline, descobrimos que há um problema.

Procurando por navigator.onLine no CanIUse.com mostra amplo suporte para o online | status offline que a propriedade fornece. No entanto, observando as notas abaixo da tabela de suporte, vemos que

“Online nem sempre significa conexão à Internet. Também pode significar apenas conexão com alguma rede ”.

Hmm, isso dá uma chave nos trabalhos um pouco.

Portanto, se você realmente deseja determinar o status online do navegador, deve desenvolver meios adicionais de verificação.

Vamos também dar uma olhada no Referência de documentos MDN para navigator.onLine. Os documentos da Web MDN fazem backup das informações do CanIUse.com e adicionam notas adicionais.

“Os navegadores implementam essa propriedade de maneira diferente … você não pode assumir que um valor verdadeiro significa necessariamente que o navegador pode acessar a Internet. Você pode estar recebendo falsos positivos … ”

E isso confirma nossos medos em usar a propriedade online do navegador como nossa solução para detectar uma conexão com a Internet. É uma solução que pode causar estragos em nossos aplicativos que dependem de saber quando fontes de dados externas estão disponíveis.

Um exemplo é quando estamos tentando determinar se um Progressive Web App está online ou não. A MDN até recomenda,

“… se você realmente deseja determinar o status on-line do navegador, deve desenvolver meios adicionais para verificar.”

Uma rápida pesquisa na web por “Navegador on-line não está funcionando” revela várias postagens no fórum em que aqueles que dependem dessa propriedade tiveram problemas.

Então, qual é a solução?

Precisamos saber quando nosso aplicativo está realmente conectado à Internet e não apenas a um roteador ou rede local. Vamos voltar ao nosso arquivo JavaScript e começar de novo.

A idéia é fazer uma solicitação e tratá-la normalmente com a captura de erros, se ela falhar. Se a solicitação for bem-sucedida, estamos online e, se falhar, não estamos.

Vamos solicitar uma pequena imagem em um intervalo para determinar o status online. O JavaScript moderno fornece a API Fetch e o código assíncrono com Async e Await. Usaremos essas ferramentas para atingir nosso objetivo.

checkOnlineStatus ()

Vamos começar criando uma função de seta assíncrona chamada checkOnlineStatus. A função retornará verdadeiro ou falso, como a propriedade online do navegador.

Dentro da função, configuraremos um bloco try onde aguardamos uma solicitação de busca para uma imagem de um pixel. Verifique se o trabalhador do serviço não está armazenando em cache esta imagem.

Os códigos de resposta HTTP entre 200 e 299 indicam sucesso e retornaremos o resultado da comparação do código de status. Isso será verdadeiro se o status da resposta for de 200 a 299 e falso caso contrário.

Também precisamos fornecer um bloco de captura que captura o erro se a solicitação falhar. Retornaremos false no bloco catch para indicar que estamos definitivamente offline se isso acontecer.

const checkOnlineStatus = async () => {  try {    const online = await fetch("/1pixel.png");    return online.status >= 200 && online.status < 300; // either true or false  } catch (err) {    return false; // definitely offline  }};

Em seguida, usaremos o método setInterval e passamos a ele uma função assíncrona anônima. A função assíncrona aguardará o resultado da nossa função checkOnlineStatus. Em seguida, usaremos uma declaração ternária com o resultado para exibir o status online atual.

Para testar este exemplo, defina o atraso do intervalo para cada 3 segundos (3000 milissegundos). Isso é realmente muito frequente, no entanto. A verificação a cada 30 segundos (30000 milissegundos) pode ser suficiente para suas necessidades reais.

setInterval(async () => {  const result = await checkOnlineStatus();  const statusDisplay = document.getElementById("status");  statusDisplay.textContent = result ? "Online" : "OFFline";}, 3000); // probably too often, try 30000 for every 30 seconds

Com nosso novo código salvo, vamos revisitar a guia Aplicativo no Chrome Dev Tools para testar a resposta offline.

offline check fetch
Ferramentas de desenvolvimento do Chrome> guia Aplicativo> Trabalhadores em serviço> Caixa de seleção offline

Eu quase esqueci de incluir o ouvinte de evento de carregamento com funcionalidade assíncrona! A detecção de evento de carregamento provavelmente é importante apenas se você tiver um aplicativo da Web progressivo utilizando um trabalhador de serviço para disponibilidade offline. Caso contrário, sua página da web ou aplicativo simplesmente não será carregado sem uma conexão.

Aqui está o novo ouvinte de evento de carregamento:

window.addEventListener("load", async (event) => {  const statusDisplay = document.getElementById("status");  statusDisplay.textContent = (await checkOnlineStatus())    ? "Online"    : "OFFline";});

Um pensamento final

O código de intervalo acima é bom para exibir um status de conexão no seu aplicativo. Dito isto, não sugiro confiar em um status de conexão verificado 20 ou 30 segundos antes de fazer uma solicitação de dados críticos em seu aplicativo.

Portanto, você deve chamar a função checkOnlineStatus diretamente antes da solicitação e avaliar a resposta antes de solicitar dados.

const yourDataRequestFunction = async () => {    const online = await checkOnlineStatus();    if (online) {    	// make data request    }}

Conclusão

Embora o navigator.onLine seja amplamente suportado, ele fornece resultados não confiáveis ​​ao determinar se nossos aplicativos estão realmente conectados à Internet. Utilizando a API Fetch e JavaScript assíncrono, podemos codificar rapidamente uma solução mais confiável.

Aqui está um link para a essência do código no GitHub, e aqui está um tutorial em vídeo que eu montei:



Fonte