How to verify that a user has an internet connection using angularJs

Question

When a user tries to log in without an Internet connection, I just need to check if he is connected to the Internet or not.

I tried the following code:

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

But this 404 status comes even when my web service failed to connect. I need to distinguish between both options if there is a problem connecting to the user's internet connection or a problem connecting to the web service.

Answer 1

Using navigator.onLine

You can use navigator.onLine and transfer it to a helper variable, e.g. ( 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 view it in the controller:

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

But that just serves as a dirty check to find out if the computer is really connected to the network, and does not mean that the Internet is working.

Using fake AJAX request

You can make fun of a service that executes a fake request in a browser ( warning: untested 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 {...} }); }); 

The code for the request is laughing at this link .

Also note that this will not work with localhost , because the server will work even when disconnected from the Internet.

Answer 2

Adapted from the MDN NavigatorOnLine.onLine CV.

Browsers implement this property in different ways.

In Chrome and Safari, if the browser cannot connect to the local (LAN) or router, it is disabled; all other conditions return true. Therefore, when you can assume that the browser is turned off when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the Internet. You could receive false positives, for example, in cases when the computer starts virtualization software with virtual ethernet adapters that are always “connected”. Therefore, if you really want to determine the online status of the browser, you must develop additional tools for checking. To learn more, see the Rocks Rocks article "Working with the grid."

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

You can see changes in network status by listening to events on window.onOnline and window.onOffline.

You can access this information through window.navigator.onLine , but as indicated in the documentation, this is a very inconsistent cross browser.

You can also listen for status changes 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 indicates that the browser is online or offline .

The navigator object contains user browser information.

It is supported in all major browsers, so you have no problem at all.