javascript - Why don't online and offline events trigger in my web app? - Stack Overflow

I want to implement offline mode for my web app and found that it can be done using online and offline events. I tried the following example from the MDN docs:

window.addEventListener("online", () => {
  console.log("You are now connected to the network.");
});

window.addEventListener("offline", () => {
  console.log("The network connection has been lost.");
});

However, the events are not triggering at all in my app. I tested this:

• In the browser console (Chrome, Edge, Firefox)
• By turning on airplane mode, disabling WiFi, and unplugging Ethernet
• By disabling the Network Adapter in Windows
• In an incognito window, but the issue persists

Surprisingly, it does work when I manually enable or disable the offline mode in DevTools.

As a workaround, I considered using this function:

async function checkRealOffline() {
    try {
        await fetch(";, { mode: "no-cors" });
        console.log("Online.");
    } catch (e) {
        console.log("Offline.");
    }
}

setInterval(checkRealOffline, 5000);

This works, but I still want to understand:

1. Why are the events not triggering in my case?
2. Are there better ways to reliably detect offline mode?

Any insights would be appreciated!

I want to implement offline mode for my web app and found that it can be done using online and offline events. I tried the following example from the MDN docs:

window.addEventListener("online", () => {
  console.log("You are now connected to the network.");
});

window.addEventListener("offline", () => {
  console.log("The network connection has been lost.");
});

However, the events are not triggering at all in my app. I tested this:

• In the browser console (Chrome, Edge, Firefox)
• By turning on airplane mode, disabling WiFi, and unplugging Ethernet
• By disabling the Network Adapter in Windows
• In an incognito window, but the issue persists

Surprisingly, it does work when I manually enable or disable the offline mode in DevTools.

As a workaround, I considered using this function:

async function checkRealOffline() {
    try {
        await fetch("https://example", { mode: "no-cors" });
        console.log("Online.");
    } catch (e) {
        console.log("Offline.");
    }
}

setInterval(checkRealOffline, 5000);

This works, but I still want to understand:

1. Why are the events not triggering in my case?
2. Are there better ways to reliably detect offline mode?

Any insights would be appreciated!

• javascript
• events
• browser
• offline
• browser-api

Share Improve this question Follow asked Mar 3 at 16:02 Pavlo ZalutskiyPavlo Zalutskiy 3555 bronze badges 1

• Have you used Navigator.onLine switch? What you observed was expected. Please see https://developer.mozilla./en-US/docs/Web/API/Navigator/onLine. Your browser needs to check network connection, only then the online status changes. – Sergey A Kryukov Commented Mar 3 at 17:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

if (navigator.onLine) {
  console.log("You are now connected to the network.");
} else {
  console.log("The network connection has been lost.");
}