2
I am 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 the '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 is like this:
function navon(){
alert("Estou online? " + navigator.onLine);
}
on 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 performed tests on Windows, Linux and Android platforms, on localhost and online domain. The following table explains my conclusion that only the alternative function works correctly in the production environment, or is better than the native functions made for this.
Here’s the question, is it normal the native function does not work well on all browsers and platforms or am I wrong? I would like to simply use Navigator.online without error.
I don’t know if you ever saw this but there’s some information there that might help.
– user7393973
I’ve seen it before, but the versions I tested are more current. What I could realize is that it depends on S.O., because Edge works perfectly on Windows because it is native, and Firefox works perfectly on Linux which in my case is native, but when I use a non-native browser in windows, Like Firefox and Chrome the so-called native functions only work with the "work-offline" tool, which indicates that there really is support by browsers. What I see is that the information that the computer is offline is not passed to browsers by Windows.
– Web Sailor
If you want it to work in every case you better use the
XMLHttpRequest. There is information in English in these questions: 1; 2; 3.– user7393973