Skip to main content

Visit Mozilla.org

Eventos online e offline

De MDC

Este artigo cobre características introduzidas no Firefox 3


O Firefox 3 implementou eventos Online/Offline da especificação WHATWG Web Applications 1.0.

Tabela de conteúdo

[editar] Visão geral

Para construir uma boa aplicação web capaz de ser usada offline, você precisar saber quando sua aplicação está realmente offline. Casualmente, você pode também precisar saber quando a sua aplicação retornou ao estado 'online' novamente. Efetivamente, as exigências colapsam como tal:

  1. Você precisa saber quando o usuário torna-se online, então você pode re-sincronizar com o servidor.
  2. Você precisa saber quando o usuário está offline, então você pode estar seguro para fazer suas requisições do servidor e elas se enfileirarem para um tempo posterior.

Este é o processo em que eventos online/offline ajudam a banalizar.

[editar] API

[editar] navigator.onLine

navigator.onLine é uma propriedade que mantém um valor true/false (true para online, false para offline). Esta propriedade é atualizada sempre que o usuário trocar do "Modo Offline" selecionando o item correspondente do menu (Arquivo -> Trabalhar Offline no Firefox).

Adicionalmente, esta propriedade deve atualizar sempre que o navegador não for mais capaz de conectar a uma rede. De acordo com a especificação:

O atributo navigator.onLine deve retornar falso se o agente de usuário não obtiver contato com a rede quando o usuário segue links ou quando scripts de uma página remota forem requisitados.

Firefox 2 atualiza esta propriedade quando trocando de/para o modo Offline do navegador, e quando perde/encontra conectividade com uma rede no Windows e Linux.

Esta propriedade existe em antigas versões do Firefox e Internet Explorer (a especificação baseou-se fora destas implementações prévias), então você pode começar usando isto imediatamente. A detecção automática do estado da rede foi implementado no Firefox 2.

[editar] Eventos "online" e "offline"

O Firefox 3 introduz dois novos eventos: "online" e "offline". Estes dois eventos são colocados no <body> de cada página quando o navegador troca entre o modo online e offline. Adicionalmente, os eventos vão de document.body, para document, terminando em window. Ambos os eventos não são canceláveis (você não pode evitar o usuário de estar online, ou indo para offline).

Você pode registrar ouvintes para estes eventos de algumas maneiras familiares:

  • usando addEventListener em window, document, ou document.body
  • configurando as propriedades .ononline ou .onoffline em document ou document.body para um objeto Function JavaScript. (Nota: usando window.ononline ou window.onoffline você não trabalhará para razões de compatibilidade.)
  • especificando os atributos ononline="..." ou onoffline="..." na etiqueta <body> na marcação HTML.

[editar] Exemplo

Há um caso de teste simples que você pode rodar para verificar se os eventos estão trabalhando. 

 <!doctype html>
 <html>
 <head>
   <script>
     function updateOnlineStatus(msg) {
       var status = document.getElementById("status");
       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
       status.setAttribute("class", condition);
       var state = document.getElementById("state");
       state.innerHTML = condition;
       var log = document.getElementById("log");
       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
     }
     function loaded() {
       updateOnlineStatus("load");
       document.body.addEventListener("offline", function () {
         updateOnlineStatus("offline")
       }, false);
       document.body.addEventListener("online", function () {
         updateOnlineStatus("online")
       }, false);
     }
   </script>
   <style>...</style>
 </head>
 <body onload="loaded()">
   <div id="status"><p id="state"></p></div>
   <div id="log"></div>
 </body>
 </html>

[editar] Referências

Retirado de "http://developer.mozilla.org/pt/docs/Eventos_online_e_offline"