navigator.onLine still true when turning off WiFi, false when set "work offline" in browser

Question

navigator.onLine is still returning true when I turn off Wi-Fi (Airport on my notebook in OS X). This is counterintuitive behavior. But when I set "work offline" in a browser like Firefox, it correctly returns false. Is this expected?

alert(navigator.onLine ? "online" : "offline");

Altogether

Firefox's (and IE's and Opera's) implementation is wrong. See my comment to that effect here: bugzilla.mozilla.org/show_bug.cgi?id=654579#c9 – Colorable

Answer 1

Yes. The browser doesn't provide network connectivity information to the page, but rather uses Work Offline's status as the value.

Cunning

It seems odd because if I turn off Wi-Fi and cellular data by turning on airplane mode on an iPhone, and then return to that page without reloading, it returns true as offline (which is correct). – Altogether

Browsers may want to detect if network connectivity is down and then set the Work Offline variable to false. However, the user may always change this variable herself. – Cunning

Answer 2

Use the window.addEventListener to detect network updates:

window.addEventListener('online',  amIOnline);
window.addEventListener('offline', amIOffline);

function amIOnline(){
    console.log('online');
}

function amIOffline(){
    console.log('offline');
}

Raffia

Answer 3

I was running into this in Google Chrome and found my way to the Online/Offline Event Detection page for Electron (which is based on Google Chrome). It turns out that virtualization software and network adapters can prevent your browser from detecting when it has gone offline.

In my case, I was turning Wifi on and off but navigator.onLine was always returning true. The problem was that I was connected to a VPN and, even after I turned Wifi off, the VPN still registered as "connected" (I imagine it might have eventually figured out that it was disconnected, but it never registered this in my testing). If I manually disconnected from the VPN, then turning Wifi on and off started immediately being reflected in Google Chrome and navigator.onLine would correctly return false.

So for folks running into this issue, the answer is that you probably have some other software on your computer that is preventing your browser from detecting the correct network status. This could be a VPN, it could be virtualization software, etc.

For folks developing web apps, this poses an annoying challenge. I've noticed that Firebase's Firestore service (a proprietary product) will just assume it is offline and go into "offline mode" if it is unable to connect to the server after 10 seconds. I imagine it does this because there isn't any surefire way of detecting online/offline status from just javascript.

Additional details from MDN

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.

Mvd