JavaScript Navigator onLine Property

What You’ll Learn

navigator.onLine is a read-only Boolean that reports whether the browser thinks the device is connected to a network. Learn the MDN check pattern, online / offline events, why the value is only a hint, five examples, and try-it labs.

Introduction

Progressive web apps, editors, and forms often need a quick answer to “does the browser think we have a network?” navigator.onLine gives that Boolean in one read.

When the value changes, the browser fires an online or offline event on window. That is the usual way to update a status banner without polling.

Understanding the onLine Property

Think of onLine as the browser’s best guess about network connectivity. You read it; you never assign to it. Pair it with events and real request error handling.

• true — the browser believes the device is online.
• false — the browser believes the device is offline.
• Read-only — part of the HTML Navigator interface.
• Baseline — Widely available across modern browsers (MDN, since July 2015).
• Events — listen on window for online and offline.

📝 Syntax

General form of the property:

navigator.onLine

Value

• A Boolean: true (online) or false (offline).

Common patterns

// MDN basic check:
if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}

// React to changes:
window.addEventListener("offline", () => {
  console.log("offline");
});
window.addEventListener("online", () => {
  console.log("online");
});

Examples Gallery

Examples follow MDN navigator.onLine patterns. Prefer Try It Yourself to inspect your browser. Use View Output for expected messaging. Toggle airplane mode or DevTools “Offline” to see changes.

console.log(navigator.onLine);

true
(or false if the browser reports offline)

if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}

online

window.addEventListener("offline", () => {
  console.log("offline");
});

window.addEventListener("online", () => {
  console.log("online");
});

console.log("Listening… current: " + (navigator.onLine ? "online" : "offline"));

Listening… current: online
(then "offline" / "online" when you toggle network)

function networkBanner() {
  return navigator.onLine
    ? "You appear to be online."
    : "You appear to be offline — changes may sync later.";
}

console.log(networkBanner());

You appear to be online.

function networkHint() {
  return {
    looksOnline: navigator.onLine,
    message: navigator.onLine
      ? "Network looks OK — still handle fetch errors."
      : "Looks offline — queue actions and show a soft warning.",
    // MDN: do not disable features based only on this flag
    allowUserActions: true
  };
}

console.log(JSON.stringify(networkHint(), null, 2));

{
  "looksOnline": true,
  "message": "Network looks OK — still handle fetch errors.",
  "allowUserActions": true
}

🚀 Common Use Cases

• Offline banners — tell users sync may wait until connectivity returns.
• Draft / form apps — queue saves locally when the status looks offline.
• PWA shell UI — update a status chip from online / offline events.
• Diagnostics — include navigator.onLine in support debug panels.
• Not for paywalls — never use this alone to enable or disable paid features.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only Boolean on Navigator.
• LAN / virtual adapters may report online without Internet access.
• Do not hard-disable features based only on onLine — provide hints and handle request failures.
• Related: connection, cookieEnabled, Window, JavaScript hub.

💡 Best Practices