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 stackoverflow.com/questions/16242389/…

Mawg
– Mawg

2014-05-17 10:27:45 +00:00
Commented May 17, 2014 at 10:27 — Mawg
– Mawg, Commented May 17, 2014 at 10:27

Sebastien Rothlisberger · Accepted Answer · 2013-03-22 16:04:52Z

7

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, 2013 at 16:04

Sebastien Rothlisberger

1701 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

joshschreuder Over a year ago

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.

Adam Over a year ago

You may want to check out Offline.js, an open-source library built for just this purpose.

Mawg Over a year ago

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 stackoverflow.com/questions/16242389/… which indicates that FF seems to be non-standard

Mawg Over a year ago

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

benek Over a year ago

This fiddle seems not working. Note that the rootScope cannot be injected in factory.

storsoc · Accepted Answer · 2020-03-13 06:37:06Z

1

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

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

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

edited Mar 13, 2020 at 6:37

storsoc

3351 silver badge8 bronze badges

answered Sep 12, 2017 at 14:07

justnajm

4,5546 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related