Eventos online e offline

  • Revision slug: Eventos_online_e_offline
  • Revision title: Eventos online e offline
  • Revision id: 178475
  • Created:
  • Creator: Roli
  • Is current revision? Não
  • コメント /* Eventos "<code>online</code>" e "<code>offline</code>" */

Revision Content

{{template.FFVerMin(3)}} O Firefox 3 implementou eventos Online/Offline da especificação WHATWG Web Applications 1.0.

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.

API

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 forra 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.

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.

Exemplo

um caso de teste simples que você pode rodar para verificar se os eventos estão trabalhando. XXX Quando os "mochitestes" para isto forem criados, apontar para este e atualizar este exemplo -nickolay

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

Referências

Categorias

Interwiki Language Links

{{ wiki.languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline" } ) }}

Revision Source

<p>{{template.FFVerMin(3)}}

O <a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a> implementou <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">eventos Online/Offline</a> da <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">especificação WHATWG Web Applications 1.0</a>.
</p>
<h3 name="Vis.C3.A3o_geral"> Visão geral </h3>
<p>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:
</p>
<ol><li> Você precisa saber quando o usuário torna-se online, então você pode re-sincronizar com o servidor.
</li><li> 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.
</li></ol>
<p>Este é o processo em que eventos online/offline ajudam a banalizar.
</p>
<h3 name="API"> API </h3>
<h4 name="navigator.onLine"> <code>navigator.onLine</code> </h4>
<p><code><a href="pt/DOM/window.navigator.onLine">navigator.onLine</a></code> é uma propriedade que mantém um valor <code>true</code>/<code>false</code> (<code>true</code> para online, <code>false</code> para offline). Esta propriedade é atualizada sempre que o usuário trocar do "Modo Offline" selecionando o item correspondente do menu (Arquivo -&gt; Trabalhar Offline no Firefox).
</p><p>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:
</p>
<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">
O atributo <code>navigator.onLine</code> deve retornar falso se o agente de usuário não obtiver contato com a rede quando o usuário segue links ou quando <i>scripts</i> de uma página remota forem requisitados.
</blockquote>
<p>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.
</p><p>Esta propriedade existe em antigas versões do Firefox e Internet Explorer (a especificação baseou-se forra 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.
</p>
<h4 name="Eventos_.22online.22_e_.22offline.22"> Eventos "<code>online</code>" e "<code>offline</code>" </h4>
<p>O <a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a> introduz dois novos eventos: "<code>online</code>" e "<code>offline</code>". Estes dois eventos são colocados no <code>&lt;body&gt;</code> de cada página quando o navegador troca entre o modo online e offline. Adicionalmente, os eventos vão de <code>document.body</code>, para <code>document</code>, terminando em <code>window</code>. Ambos os eventos não são canceláveis (você não pode evitar o usuário de estar online, ou indo para offline).
</p><p>Você pode registrar ouvintes para estes eventos de algumas maneiras familiares:
</p>
<ul><li> usando <code><a href="pt/DOM/element.addEventListener">addEventListener</a></code> em <code>window</code>, <code>document</code>, ou <code>document.body</code>
</li><li> configurando as propriedades <code>.ononline</code> ou <code>.onoffline</code> em <code>document</code> ou <code>document.body</code> para um objeto <code>Function</code> JavaScript. (<b>Nota:</b> usando <code>window.ononline</code> ou <code>window.onoffline</code> você não trabalhará para razões de compatibilidade.)
</li><li> especificando os atributos <code>ononline="..."</code> ou <code>onoffline="..."</code> na etiqueta <code>&lt;body&gt;</code> na marcação HTML.
</li></ul>
<h3 name="Exemplo"> Exemplo </h3>
<p>Há <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">um caso de teste simples</a> que você pode rodar para verificar se os eventos estão trabalhando.
<span class="comment">XXX Quando os "mochitestes" para isto forem criados, apontar para este e atualizar este exemplo -nickolay</span>
</p>
<pre class="eval"> &lt;!doctype html&gt;
 &lt;html&gt;
 &lt;head&gt;
   &lt;script&gt;
     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);
     }
   &lt;/script&gt;
   &lt;style&gt;...&lt;/style&gt;
 &lt;/head&gt;
 &lt;body onload="loaded()"&gt;
   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
   &lt;div id="log"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</pre>
<h3 name="Refer.C3.AAncias"> Referências </h3>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a>
</li><li> <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> e um <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a>
</li><li> <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a>
</li><li> <a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a>
</li></ul>
<p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ wiki.languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline" } ) }}
Revert to this revision