Mais uma API simples e útil do HTML5. Com ela temos acesso, de forma nativa, ao status da conexão do navegador, ou seja, se ele tem acesso ou não à rede. Não confundir com acesso à internet, já que é possível estarmos conectados em uma rede local sem acesso externo à internet.

API

A API é bem direta ao ponto. Basta adicionarmos listeners aos objetos window, document ou ao elemento body e passarmos a função que será executada uma vez que esses eventos forem disparados. O evento irá, na verdade, acontecer no elemento body, mas irá propagar até o objeto window, passando por document. Por isso podemos por o listener em qualquer um.

// javascript puro
window.addEventListener('online', function() {
  // ...
})
window.addEventListener('offline', function() {
  // ...
})

No exemplo acima estamos escutando o evento através de JavaScript puro. No exemplo abaixo estamos usando jQuery. O método on é agora o método padrão para escutar eventos no jQuery, inclusive para os eventos clássicos como click, hover, etc. Os dois códigos são equivalentes.

// jQuery style
$(window)
  .on('online', function() {
    // ...
  })
  .on('offline', function() {
    // ...
  })

Propriedade online

Também é possível detectar se o navegador está online de forma síncrona. Basta checar a propriedade navigator.onLine. Se ela retornar true, significa que estamos com conexão à rede, se retornar false…vocês entenderam.

if (navigator.onLine) {
  // está online
} else {
  // está offline
}

Demo

O que melhor que um exemplo para demonstrar a nova API? Caso esteja usando o Chrome, Safari ou Internet Explorer, desconecte a sua máquina da rede desligando o Wi-Fi ou desplugando o cabo ethernet para então ver uma animação informando que a conexão foi perdida. Caso esteja no Firefox, vá no menu File > Work Offline para que o evento offline seja disparado. Conecte de novo e, quando a conexão retornar, o aviso irá sumir. Simples e lindo, hein?

Suporte e Inconsistências

Cada navegador interpreta o termo offline de maneira diferente. A especificação do HTML5 informa que o evento offline deve ser disparado quando o computador perder conexão com a rede, e não necessariamente com a internet.

Returns false if the user agent is definitely offline (disconnected from the network). Returns true if the user agent might be online. The events online and offline are fired when the value of this attribute changes.

O que significa que, se apenas a conexão entre seu access point e seu provedor de internet for perdida, o evento offline não será disparado. Mas caso a conexão entre o computador e o access point for perdida e esta for a única interface de rede de sua máquina, o evento offline será disparado.

O Firefox não implementa a API como definida na especificação e apenas dispara o evento quando explicitamente optamos que ele trabalhe no modo offline, como fizemos anteriormente no demo.

O Opera, apesar de apresentar a propriedade navigator.onLine, parece não implementar os eventos. E nem mesmo a propriedade é atualizada quando perdemos conexão com a rede.

Infelizmente não achei, nem mesmo no Can I Use, uma tabela de suporte a estes eventos. Então na tabela acima estão todos os browsers com suas respectivas versões que usei para testar o experimento do post.