How to check online/offline state in browser via javascript?

Question

I want a simply code, that checks the internet connection inside the browser and a handling that handles the various codes, that will come back.

I already tried a http-get-request to handle the returning status code, but at the end, I had some issues with the same-origin-policy.

I also tried the ononline- and onoffline-event, but these are depricated and do not work in my target-browser.

My 3rd option was with navigator.onLine. When the Browser got Internet Connection, the output is true. But, when my browser got not connection, the answer of navigator.onLine is not false...

My main use case is to check, if the browser got internet connection or not. If he got Internet Connection, then he should open www.abc.de But if there is no Internet Connection, he should open a local application with localhost:8080/abc.

Answer 1

In principle this is a duplicate of Why navigator.onLine is inconsistent? Is there any reliable solutions?

However I would personally try something like

if (location.host.indexOf("localhost")==-1) { // we are not already on localhost
  var img = new Image();
  img.onerror=function() { location.replace("http://localhost:8080/abc"); }
  img.src="http://servertotest.com/favicon.ico?rnd="+new Date().getTime();
}

Answer 2

To detect the offline and online status you need to use the below example.

Code Sample

// add "is-offline" class to the html element if user is offline and remove when online again
window.addEventListener('load', function() {
  function updateOnlineStatus(event) {
    if (navigator.onLine) {
      document.documentElement.classList.remove('is-offline');
      document.querySelector('.connection-status').innerHTML = 'Online';
    } else {
      document.documentElement.classList.add('is-offline');
      document.querySelector('.connection-status').innerHTML = 'Offline';
    }
  }

  window.addEventListener('online', updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

.connection-status {
  font-size: 19px;
  font-weight: 600;
  color: #58b05c;
}

.is-offline .connection-status {
  color: red;
}

<center>
  <p class="connection-status">Online</p>
</center>

Answer 3

try to use this

window.navigator.onLine;

for more information, please refer

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine