Estou criando uma aplicação PWA e o primeiro passo, obviamente será verificar a rede. Existem três métodos conhecidos:
- usar a variável global 'navigator.onLine'
- usar os eventos 'ononline' e 'onoffline' na tag 'body'
- realizar um 'xmlhttprequest' como função alternativa às duas primeiras que são nativas
Meu código de teste está assim:
function navon(){
alert("Estou online? " + navigator.onLine);
}
na tag 'body':
<body ononline="alert('ON#')" onoffline="alert('OFF#')">
e a função alternativa:
var rede = function (){
var request = new window.XMLHttpRequest({mozSystem: true});
// request.open('HEAD', 'http://www.teste02.dev/robots.txt', true);
request.open('HEAD', 'http://localhost/sandbox/teste02.dev/public/robots.txt', true);
request.timeout = 5750;
request.addEventListener('load', function(event) {
console.log('We seem to be online!', event);
online = true;
});
var offlineAlert = function(event) {
console.log('We are likely offline:', event);
}
request.addEventListener('error', offlineAlert);
request.addEventListener('timeout', offlineAlert);
request.send(null);
}
A página de teste:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="index.js" charset="utf-8"></script>
<link rel="stylesheet" href="index.css">
<body ononline="alert('ON#')" onoffline="alert('OFF#')">
<div id="">
<button type="button" id="button" onclick="rede()">REQUEST</button>
</div>
<div id="">
<button type="button" id="button" onclick="navon()">NAVIGATOR.onLine</button>
</div>
</body>
</html>
Realizei testes em plataformas Windows, Linux e Android, em localhost e em dominio online. A tabela a seguir explica minha conclusão de que somente a função alternativa funciona corretamente em ambiente de produção, ou seja melhor que as funções nativas feitas para isso.
Eis a dúvida, é normal a função nativa não funcionar bem em todos os navegadores e plataformas ou eu que estou errando? Eu gostaria de simplesmente usar o navigator.onLine sem erro.
XMLHttpRequest
. Há informação em inglês nestas perguntas: 1; 2; 3.