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:
- Você precisa saber quando o usuário torna-se online, então você pode re-sincronizar com o servidor.
- 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 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.
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
addEventListeneremwindow,document, oudocument.body - configurando as propriedades
.ononlineou.onofflineemdocumentoudocument.bodypara um objetoFunctionJavaScript. (Nota: usandowindow.ononlineouwindow.onofflinevocê não trabalhará para razões de compatibilidade.) - especificando os atributos
ononline="..."ouonoffline="..."na etiqueta<body>na marcação HTML.
Exemplo
Há 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
- 'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification
- The bug tracking online/offline events implementation in Firefox e um follow-up
- A simple test case
- An explanation of Online/Offline events
Categorias
Interwiki Language Links