JavaScript Navigator connection Property

What You’ll Learn

navigator.connection returns a NetworkInformation object — hints about bandwidth and connection quality. Learn effectiveType, downlink, rtt, saveData, change events, five examples, and try-it labs.

Introduction

Not every visitor has a fast, unlimited network. Some are on slow mobile data, some have “Data Saver” turned on, and some switch between Wi‑Fi and cellular.

The Network Information API exposes those hints through navigator.connection. You can use them to pick HD vs SD video, smaller images, or fewer background syncs — when the browser supports the API.

Understanding the connection Property

Think of navigator.connection as a read-only dashboard for the current network. You do not assign to it — you read properties on the object it returns.

• effectiveType — coarse quality: slow-2g, 2g, 3g, or 4g.
• downlink — estimated bandwidth in Mbps.
• rtt — estimated round-trip time in milliseconds.
• saveData — true when reduced data usage is requested.
• type — connection kind (for example wifi, cellular) where supported.
• change event — fires when connection information updates.

📝 Syntax

General form of the property:

navigator.connection

Value

• A NetworkInformation object describing the system connection (or undefined if unsupported).

Common patterns

const conn = navigator.connection;

if (conn) {
  console.log(conn.effectiveType); // e.g. "4g"
  console.log(conn.downlink);      // Mbps estimate
  console.log(conn.rtt);           // ms estimate
  console.log(conn.saveData);      // true | false

  conn.addEventListener("change", () => {
    console.log("connection changed:", conn.effectiveType);
  });
}

Examples Gallery

Examples follow MDN Network Information / navigator.connection patterns. Prefer Try It Yourself to inspect your own browser. Use View Output for expected messaging.

const supported = !!navigator.connection;
console.log(supported ? "connection available" : "connection missing");

connection available
(or "connection missing" in Safari / Firefox)

const conn = navigator.connection;
if (!conn) {
  console.log("unsupported");
} else {
  console.log("effectiveType: " + conn.effectiveType);
}

effectiveType: 4g
(or 3g / 2g / slow-2g / unsupported)

const conn = navigator.connection;
if (!conn) {
  console.log("unsupported");
} else {
  const lines = [
    "effectiveType: " + conn.effectiveType,
    "downlink: " + conn.downlink + " Mbps",
    "rtt: " + conn.rtt + " ms",
    "saveData: " + conn.saveData
  ];
  console.log(lines.join("\n"));
}

effectiveType: 4g
downlink: 10 Mbps
rtt: 50 ms
saveData: false
(exact numbers vary by device / network)

function pickMediaQuality() {
  const conn = navigator.connection;
  if (!conn) return "high"; // safe default when unsupported
  if (conn.saveData) return "low";
  const t = conn.effectiveType;
  if (t === "slow-2g" || t === "2g") return "low";
  if (t === "3g") return "medium";
  return "high";
}

console.log("quality: " + pickMediaQuality());

quality: high
(or medium / low depending on hints)

const conn = navigator.connection;
const out = [];

function report(label) {
  if (!conn) {
    out.push(label + ": unsupported");
    return;
  }
  out.push(label + ": " + conn.effectiveType);
}

report("initial");
if (conn) {
  conn.addEventListener("change", function () {
    report("changed");
    console.log(out.join("\n"));
  });
}
console.log(out.join("\n"));
// Toggle network / Data Saver in DevTools to see "changed" in Try It

initial: 4g
(then "changed: …" when the network hint updates)

🚀 Common Use Cases

• Adaptive images / video — lower resolution on 2g / slow-2g.
• Respect Data Saver — skip autoplay or prefetch when saveData is true.
• Defer heavy work — delay analytics batches or large uploads on slow links.
• UX messaging — gently warn before starting a large download.
• Progressive enhancement — improve Chromium experiences without breaking Safari/Firefox.

📝 Notes

• Experimental / not Baseline — support is limited (mainly Chromium).
• Not deprecated — useful as progressive enhancement where available.
• Values are estimates; do not treat them as precise measurements.
• Combine with online/offline events for reachability, not only quality.
• Related: contacts, Window, JavaScript hub.

💡 Best Practices