How can I detect with AngularJS if the app is offline?

Question

We have many customers in remote areas and lost of connectivity is frequent. How can I detect if the javascript app is offline? Meaning cannot reach the server and load the templates.

See also http://stackoverflow.com/questions/16242389/how-to-check-internet-connection-in-angularjs — Mawg says reinstate Monica, May 17 '14 at 10:27

score 6 · Accepted Answer · answered Mar 22 '13 at 16:04

6

I finally found a JSFiddle that does exactly that: Check if the web application is online. It uses window.navigator.onLine.

JSFiddle: http://jsfiddle.net/rommsen/QY8w2/

Source: https://groups.google.com/d/msg/angular/ZncvSVUc9y4/S4jH1e_XgGoJ

answered Mar 22 '13 at 16:04

Sebastien Rothlisberger

160
1
1
9

7

Note that `windows.navigator.onLine` has different implementations depending on the browser, and a status of `true` only indicates connection to a LAN or router, not to a specific resource or the broader internet. You may need to specifically test connection to your desired resource and check for 404 to properly test offline conditions. – joshschreuder Oct 13 '13 at 23:57
1

You may want to check out [Offline.js](https://github.com/HubSpot/offline), an open-source library built for just this purpose. – Adam Oct 27 '13 at 22:31
I didn't D/L it, I just opened up their simulator. rather than using their checkbox to pretend, I actually pulled my Ethernet cable. In Chrome & MS IE, I go the "you are offline" alert. FF did not show it. See also http://stackoverflow.com/questions/16242389/how-to-check-internet-connection-in-angularjs which indicates that FF seems to be non-standard – Mawg says reinstate Monica May 17 '14 at 10:27
I just checked the Plunk in the awarded answer : works with Chrome Version 34.0.1847.137 m, MS IE v11.0.x.x, but NOT with FireFox v29.0.1 – Mawg says reinstate Monica May 17 '14 at 10:30
This fiddle seems not working. Note that the rootScope cannot be injected in factory. – benek Oct 17 '14 at 15:52

score 1 · Answer 2 · edited Mar 13 '20 at 06:37

1

$scope.online = $window.navigator.onLine;

$window.addEventListener("offline", function() {
    $scope.online = false;
});

$window.addEventListener("online", function() {
    $scope.online = true;
});

edited Mar 13 '20 at 06:37

storsoc

309
1
7

answered Sep 12 '17 at 14:07

justnajm

4,422
6
36
56

How can I detect with AngularJS if the app is offline?

2 Answers2

Linked