Network quality indicator on a webapp

Question

Is there a way we could indicate the client's current network quality (a bar of some sort, similar to the n/w quality bar on a phone) on a web application?

A web app of ours, that deals with data transfer, has most transfer failures because of network issues with clients, who obviously don't know about it. Clients keep reporting failures whereas the actual issue is with their n/w connectivity, and I'm looking for a way that can indicate the same (inside my web app) to them when they are using the application.

I know there are other tools for investigating that, but layman user setups don't have them (at least our users).

Thanks.

Answer 1

One way would be to use window.navigator.onLine for example:

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

or capture the change:

window.addEventListener("offline", function(e) {
  alert("offline");
}, false);

window.addEventListener("online", function(e) {
  alert("online");
}, false);

You could take averages on certain time intervals and develop an algorithm to quantify the connectivity as 10%, 50%, etc...

You could also just set up an AJAX poll and watch for timeouts, but be careful to not increase traffic too much:

$.ajax({
  type: "GET",
  url: "yourserver.com",
  success: function(data){
    alert("Connection active!")
  }
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    if(textStatus == 'timeout') {
       alert('Connection seems dead!');
    }
  }
});