I'm creating a PWA application and the first step will obviously be to check the network. There are three known methods:
- use the global variable 'navigator.onLine'
- use 'ononline' and 'onoffline' events in the 'body' tag
- perform an 'xmlhttprequest' as an alternative function to the first two that are native
My test code looks like this:
function navon(){
alert("Estou online? " + navigator.onLine);
}
in the 'body' tag:
<body ononline="alert('ON#')" onoffline="alert('OFF#')">
and the alternative function:
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);
}
The test page:
<!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>
I ran tests on Windows, Linux and Android platforms, localhost and online domain. The following table explains my conclusion that only the alternate function works correctly in the production environment, that is, rather than the native functions made for it.
That's the question, is it normal for the native function not to work well on all browsers and platforms or what am I missing? I would like to simply use the navigator.onLine without error.