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