How to check user has internet connection, using angularJs

Question

When an user attempts to log in without Internet connection, I just need to check whether he/she is connected to internet or not.

I tried the following code :

if (status == '404') {
    $scope.error="No internet connection";
    return false;
}

But this status 404 comes even when my Web Service failed to connect. I need to differentiate both, if is the user's internet connection issue or the Web Service connection issue.

Answer 1

Using navigator.onLine

You can use navigator.onLine and wrap it on a helper variable, like this (Credits to this answer)

myApp.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function () {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);
      $window.addEventListener("online", function () {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

and then watch it in the controller:

$scope.$watch('online', function(newStatus) { ... });

But that just serves as a dirty check to know if the PC is actually connected to a network, not meaning that the internet is working.

Using a fake AJAX request

You can mock a service that does a fake request to a browser (warning: non-tested code below)

myApp.service('Internet', function($http){
  this.IsOk = function () {
    return $http({ method: 'HEAD', url: '/' + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000) })
    .then(function(response) {
      var status = response.status;
      return status >= 200 && status < 300 || status === 304;
    });
  }
});

And then use something in this context:

myApp.controller('TestController', function(Internet){

  Internet.IsOn().then(function(isok){
    if(isok) {...} else {...}
  });

});

Code for request mocking in this link.

Also note that it will not work using localhost, because the server will work even when disconnected to the internet.

Answer 2

Taken from MDN's summary of NavigatorOnLine.onLine.

Browsers implement this property differently.

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. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. To learn more, see the HTML5 Rocks article, Working Off the Grid.

In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. All other conditions return a true value.

You can see changes in the network state by listening for the events on window.onOnline and window.onOffline.

You can access that information via window.navigator.onLine, but as the documentation states, it's very inconsistent cross-browser.

You can also listen for changes in status using window.addEventListener as follows:

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

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