JavaScript Navigator product Property

What You’ll Learn

navigator.product is a legacy Navigator property. Per MDN, its value is always "Gecko" in any browser — kept only for compatibility. Learn what it returns, why sniffing fails, five examples, and better alternatives.

Introduction

The name product sounds like it should tell you which browser engine you are on. In practice, the HTML specification requires every conforming browser to return the fixed string "Gecko".

So if you log navigator.product in Chrome, Edge, Firefox, or Safari, you will almost always see the same value: Gecko.

Learn it so legacy code makes sense — then use feature detection for real apps.

Understanding the product Property

product is a read-only string on Navigator. Historically it related to engine / product labeling. Today it is a fixed compatibility value.

• Value is always "Gecko" in conforming browsers.
• Kept for old scripts that expected that string.
• Useless for telling Chrome apart from Firefox or Safari.
• Part of the same legacy family as appCodeName and appName.

📝 Syntax

General form of the property:

navigator.product

Value

• The string "Gecko".

Common patterns

console.log(navigator.product); // "Gecko"

// Always true in modern browsers:
const isLegacyGeckoLabel = navigator.product === "Gecko";

// Prefer feature detection instead of sniffing:
if ("serviceWorker" in navigator) {
  // safe to use service workers
}

Examples Gallery

Examples follow MDN navigator.product behavior. Prefer Try It Yourself — you should see Gecko in any modern browser.

console.log(navigator.product);

Gecko

const isGeckoLabel = navigator.product === "Gecko";
console.log("product === \"Gecko\": " + isGeckoLabel);
console.log("This does NOT mean you are on Firefox.");

product === "Gecko": true
This does NOT mean you are on Firefox.

const lines = [
  "value: " + navigator.product,
  "typeof: " + typeof navigator.product
];
console.log(lines.join("\n"));

value: Gecko
typeof: string

const lines = [
  "product: " + navigator.product,
  "appCodeName: " + navigator.appCodeName,
  "appName: " + navigator.appName
];
console.log(lines.join("\n"));
console.log("None of these identify a modern browser brand.");

product: Gecko
appCodeName: Mozilla
appName: Netscape
None of these identify a modern browser brand.

const lines = [];
lines.push(
  "product: " + navigator.product + " — ignore for sniffing"
);
lines.push(
  "serviceWorker: " +
    ("serviceWorker" in navigator ? "available" : "missing") +
    " — use this for features"
);
console.log(lines.join("\n"));

product: Gecko — ignore for sniffing
serviceWorker: available — use this for features

🚀 Common Use Cases

• Learning Navigator history — understand why Chrome still says Gecko.
• Legacy code review — spot brittle sniffing that checks product.
• Interview / trivia — know the fixed compatibility strings.
• Not for browser detection — never gate features on "Gecko".
• Not for fingerprinting — the value is shared by nearly everyone.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Always "Gecko" — do not treat as a real product name.
• Read-only string on Navigator.
• Related: productSub, appCodeName, appName, Window.

💡 Best Practices