How to check user has internet connection, using angularJs - 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");})

Answer 3

There is a JavaScript property, navigator.onLine, it returns a Boolean value that specifies wether the browser is in online mode or offline mode.
The navigator object contains information about the user's browser.
It is supported in all major browsers, so you sholdn't have any problem at all.