How to detect when online/offline status changes

Question

I want to know when internet connection is lost and regained, so that I can toggle between an alert saying "whoops, no internet" and a Google map or a grid containing data derived from my server.

This related question and this other related question think that they have the answer, but they do not.

Their solution works with Chrome Version 34.0.1847.137 m, MS IE v11.0.x.x, but NOT with FireFox v29.0.1, so I am seeking a solution which works with all of those three browsers.

---

[Update] AS @Quad points out there are different ways of defining what it means to be online. I am definign it as "can I fetch the data which I need to show to my user or not?".

---

I have several services, which are responsible for fetching data from several servers (what's best? A single, parameterized, service? One service per server? Or one service per type of data per server? I am thinking the latter, as each service can then map to a controller which maps to a view. But I am new to Angular, so may well be wrong).

Additionally, I had coded a service which is responsible for attempting to reconnect when connection is lost.

Anyone who tries an $http.get and gets 404 can invoke the service which would
1) broadcast that there was no internet (so that no one else would try to connect)
2) regularly attempt to connect to my server and
3) when successful, stop the connection attempts and broadcast that the app is now online again.

However, that seemed very klunky and the solution offered in the two related questions seemed elegant - except for FF :-(

I cannot be reinventing the wheel here. How do others do it? In fact, I am surprised that there is not already an "official" Angular solution

Answer 1

The best way that I would know would be to intercept the HTTP handler, if its a 401 / 501/ etc then to handle it according

ex:

angular.module('myApp', ['myApp.services'],      function ($httpProvider) {      var interceptor = ['$rootScope', '$q', function ($rootScope, $q) {          function success(response) {             return response;         }          function error(response) {             var status = response.status; // error code              if ((status >= 400) && (status < 500)) {                 $rootScope.broadcast("AuthError", status);                 return;             }              if ( (status >= 500) && (status < 600) ) {                 $rootScope.broadcast("ServerError", status);                 return;             }              // otherwise             return $q.reject(response);          }          return function (promise) {             return promise.then(success, error);         }      }];     $httpProvider.responseInterceptors.push(interceptor); 

then in your code that listens for the on of, just add in

$rootScope.$on("ServerError", someServerErrorFunction); 

You could also add an internal flag and broadcast only when that flag changed.

But if you are looking for a solution where the user is not communicating with the server too frequently, you could add a section that pings the server every minute or so, but that may not be responsive as you like.