JavaScript Navigator userAgentData Property

What You’ll Learn

navigator.userAgentData is the experimental entry point to User-Agent Client Hints. Learn NavigatorUAData low-entropy fields (brands, mobile, platform), how getHighEntropyValues() works, secure-context rules, five examples, and try-it labs.

Introduction

The classic navigator.userAgent string is one long, hard-to-parse label. User-Agent Client Hints offer a cleaner API: structured fields for brand, mobile, and platform — with more detailed data only when you ask for it.

navigator.userAgentData returns a NavigatorUAData object. Beginners usually start with three low-entropy properties:

• brands — array of { brand, version } objects
• mobile — true if the UA looks mobile
• platform — platform brand string (for example "Windows")

Understanding the userAgentData Property

Think of userAgentData as a modern client-hints door on navigator — not a replacement for feature detection when you need an API.

• NavigatorUAData — object returned by the property.
• Low entropy — brands, mobile, platform (sync reads).
• High entropy — request via Promise with getHighEntropyValues().
• Secure context — HTTPS / localhost in supporting browsers.
• Workers — MDN notes NavigatorUAData is also available via WorkerNavigator.userAgentData.
• Limited support — commonly Chromium-based; missing in some major browsers.

📝 Syntax

General form of the property:

navigator.userAgentData

Value

• A NavigatorUAData object (when supported).

Common patterns

// Always feature-detect first
if ("userAgentData" in navigator) {
  console.log(navigator.userAgentData.brands); // MDN example
  console.log(navigator.userAgentData.mobile);
  console.log(navigator.userAgentData.platform);
} else {
  console.log("userAgentData not available — fall back or skip.");
}

// High-entropy hints (async)
if (navigator.userAgentData?.getHighEntropyValues) {
  navigator.userAgentData
    .getHighEntropyValues(["architecture", "platform", "platformVersion"])
    .then((ua) => console.log(ua));
}

Examples Gallery

Examples follow MDN navigator.userAgentData patterns. Prefer Try It Yourself in Chrome / Edge on HTTPS — Firefox and Safari may report the API missing.

const lines = [
  "userAgentData: " + ("userAgentData" in navigator ? "available" : "missing"),
  "isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));

userAgentData: available
isSecureContext: true
(or "missing" in browsers without Client Hints UA Data)

if (!("userAgentData" in navigator)) {
  console.log("userAgentData not supported");
} else {
  console.log(navigator.userAgentData.brands);
  // Often looks like:
  // [{ brand: "Chromium", version: "143" }, { brand: "Google Chrome", version: "143" }, ...]
}

[
  { "brand": "Not A;Brand", "version": "8" },
  { "brand": "Chromium", "version": "143" },
  { "brand": "Google Chrome", "version": "143" }
]
(exact brands vary; unsupported browsers log the missing message)

if (!("userAgentData" in navigator)) {
  console.log("userAgentData not supported");
} else {
  const ua = navigator.userAgentData;
  const brandNames = ua.brands.map((b) => b.brand).join(", ");
  console.log("brands: " + brandNames);
  console.log("mobile: " + ua.mobile);
  console.log("platform: " + ua.platform);
}

brands: Not A;Brand, Chromium, Google Chrome
mobile: false
platform: Windows
(values vary by device / browser)

const lines = [];
lines.push("classic userAgent length: " + navigator.userAgent.length);

if ("userAgentData" in navigator) {
  lines.push("clientHints platform: " + navigator.userAgentData.platform);
  lines.push("clientHints mobile: " + navigator.userAgentData.mobile);
} else {
  lines.push("clientHints: not supported — keep a fallback");
}

console.log(lines.join("\n"));

classic userAgent length: 117
clientHints platform: Windows
clientHints mobile: false

async function readHighEntropy() {
  if (!navigator.userAgentData?.getHighEntropyValues) {
    return "getHighEntropyValues not available";
  }
  const ua = await navigator.userAgentData.getHighEntropyValues([
    "architecture",
    "model",
    "platform",
    "platformVersion",
    "fullVersionList"
  ]);
  return JSON.stringify(ua, null, 2);
}

readHighEntropy().then((text) => console.log(text));

{
  "architecture": "x86",
  "model": "",
  "platform": "Windows",
  "platformVersion": "15.0.0",
  "fullVersionList": [ ... ],
  "brands": [ ... ],
  "mobile": false
}
(or "getHighEntropyValues not available")

🚀 Common Use Cases

• Structured brand lists — read brands instead of parsing UA substrings.
• Coarse device class — use mobile as a hint (not as the only responsive strategy).
• Platform label — display or log platform when Client Hints exist.
• Optional high-detail telemetry — request architecture / platformVersion only when needed.
• Progressive enhancement — fall back to userAgent logs when the API is missing.

📝 Notes

• Experimental & Limited availability — not Baseline; feature-detect always.
• Not Deprecated or Non-standard — Experimental banner only.
• Secure context required (HTTPS / localhost).
• Returns NavigatorUAData; main sync fields are brands, mobile, platform.
• Related: vendor, userAgent, platform, product.

💡 Best Practices