Como detectar se a conexão está offline com JavaScript

Neste artigo você vai aprender a como detectar se a conexão está offline, utilizando propriedades nativas da linguagem JavaScript!

Fala programador(a), beleza? Bora aprender mais sobre os recursos de JS para detectar a conexão do usuário!

Temos três recursos para verificar a conexão com JavaScript:

• Verificar quando o usuário entra na página;
• Verificar se o navegador ficou offline durante a utilização da página;
• Verificar se o navegador ficou online durante a utilização da página;

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

A primeira situação é por meio de uma propriedade, já que esta informação é armazenada no objeto window

As outras duas são verificadas por meio de eventos

Veja um exemplo de como detectar inicialmente a conexão:

const isOnline = window.navigator.onLine


console.log(isOnline) // true

A resposta nos é dada por um booleano, quando true a conexão está online

Se receber false, o usuário não está conectado

Agora vamos aos eventos para detectar ao longo da utilização se o usuário está ou não offline:

window.addEventListener('online', () => {
	console.log("Ficou online!")
});

window.addEventListener('offline', () => {
	console.log("Ficou offline!")
});

Temos o evento online e offline, que vão disparar somente quand o status de conexão mudar

Dentro das funções do evento você vai aplicar a sua lógica para executar algo quando o status for alterado

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você viu como detectar se a conexão está offline

Temos diversas ferramentas, a propriedade onLine verifica o status inicial do usuário, ao entrar na página

Já os eventos online e offline podem monitorar o status do usuário ao longo da navegação

Assim que a conexão for alterada, teremos a disparada de um destes eventos

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!