navigator.connection is a read-only property that returns a NetworkInformation object about the system’s network connection (MDN) — useful as a hint for adaptive loading (HD vs light content).
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.connection. Start with this line.
navigator.connection| Call | What it does |
|---|---|
navigator.connection | Primary signature. |
Built into the browser. Read navigator.connection on Navigator — no import required.
navigator.connection| Parameter | Description |
|---|---|
| change event | Optional. React when connection changes |
| Return Value | Description |
|---|---|
| * | NetworkInformation (read-only property) |
Check whether the Network Information API is available.
if ("connection" in navigator && navigator.connection) {
console.log("connection supported");
} else {
console.log("connection missing — use defaults");
}in. Safe check before reading fields.Log effectiveType, downlink, rtt, and saveData.
const conn = navigator.connection;
if (!conn) {
console.log("connection missing");
} else {
console.log("effectiveType:", conn.effectiveType);
console.log("downlink:", conn.downlink);
console.log("rtt:", conn.rtt);
console.log("saveData:", conn.saveData);
}navigator.connection once.downlink ≈ Mbps; rtt ≈ ms.Choose light vs full quality from saveData and effectiveType.
function mediaQuality() {
const conn = navigator.connection;
if (!conn) return "default";
const slow = ["slow-2g", "2g"].includes(conn.effectiveType);
if (conn.saveData || slow) return "light";
return "full";
}
console.log("quality:", mediaQuality());
// Optional: react when the connection changes
if (navigator.connection) {
navigator.connection.addEventListener("change", () => {
console.log("updated quality:", mediaQuality());
});
}"default" quality.slow-2g / 2g → light path.navigator.connection has limited availability on MDN — not Baseline. Chromium-based browsers are the usual targets; many others omit it.
Returns NetworkInformation (effectiveType, downlink, rtt, saveData, change). Feature-detect; use as adaptive-loading enhancement only.
Bottom line: Safe as progressive enhancement for media quality. Always provide defaults when the API is missing.
Learn the related Navigator contacts property.
7 people found this page helpful