navigator.onLine not always working

Question

I'm having an issue with the navigator.onLine property.

I'm running a simple website from a local kiosk running on a WAMP.

On my laptop when I test this it works. I turn off WiFi and the alert box shows up. Disconnecting the internet on the kiosk running the WAMP software does not produce the false status. Any ideas why?

var online = navigator.onLine;

if (online == false) {

    alert("Sorry, we currently do not have Internet access.");
    location.reload();

}

Slogan

Answer 1

MDN about navigator.onLine:

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet.

As described above, this property is not trustable, so, in my opinion, the best workaround is an ajax call to a server-side page. If the browser is offline, then the connection will fail and, thus, the onerror event will be called. Otherwise, the onload event is called:

function isOnline(no,yes){
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function(){
        if(yes instanceof Function){
            yes();
        }
    }
    xhr.onerror = function(){
        if(no instanceof Function){
            no();
        }
    }
    xhr.open("GET","anypage.php",true);
    xhr.send();
}

isOnline(
    function(){
        alert("Sorry, we currently do not have Internet access.");
    },
    function(){
        alert("Succesfully connected!");
    }
);

Mcauley

Minor correction -the function order in your arguments is swapped, should be function isOnline(yes, no){ ... } – Stanza

What if I want to load jQuery from Google's CDN, and execute jQuery code if the request succeeded? – Mudstone

Then you should place your logic within the success callback (in case, the yes function). – Mcauley

You can also call jQuery.ajax, then listen to error: function(x, e). If x.status ===0 means that there is network problem and probably offline – Tobit

When I turn off wifi I still get true when executing navigator.online. But I would not use GET method, but rather HEAD, because you only want to check if you are online, you don't need the content... – Dercy

I'd like to add that, If you want to examine any other websites except your own website (where the call has been made) e.g. from www.YourSite.com to https//:google.com, then an error will be raise if the target site (google.com) did not accept Cross Site Calls. Please correct me if i'm wrong. – Crossexamine

Answer 2

If you are using axios:

axios.request(options).catch(function(error) {
  if (!error.response) {
    // network error (server is down or no internet)
  } else {
    // http status code
    const code = error.response.status
    // data from server while error
    const response = error.response.data
  }
});

Decrepitate