Navigator.product — Eigenschaft · JavaScript-Referenz

Signatur

Navigator.product

Beschreibung

navigator.product ist eine schreibgeschützte Eigenschaft des Navigator-Objekts. Laut HTML-Standard gibt sie in jedem Browser den festen String "Gecko" zurück, also auch in Chrome, Safari und Edge, die gar nicht auf der Gecko-Engine von Firefox basieren.

Die Eigenschaft gibt es nur noch aus Gründen der Web-Kompatibilität. Früher haben manche Skripte damit abgefragt, ob ein Browser „Gecko-kompatibel“ ist. Damit solche alten Seiten nicht kaputtgehen, liefern heute alle Browser denselben Wert. Deshalb eignet sie sich nicht dazu, den Browser oder die Engine zu erkennen.

In der Praxis begegnet einem navigator.product fast nur in älterem Code. Einen sinnvollen Einsatz gibt es trotzdem: In React Native ist der Wert "ReactNative". Manche Bibliotheken (z. B. ältere Axios-Versionen) nutzen das, um diese Umgebung von einem echten Browser zu unterscheiden. Für neuen Code solltest du stattdessen gezielt prüfen, ob eine Funktion vorhanden ist (Feature Detection).

Rückgabewert

Typ

string

Beschreibung

In allen standardkonformen Browsern immer "Gecko". In anderen Umgebungen kann ein anderer Wert stehen (z. B. "ReactNative") oder die Eigenschaft fehlt ganz (undefined, z. B. in Node.js vor Version 21 ohne navigator).

Beispiele

Wert auslesen

// Liefert in Chrome, Firefox, Safari und Edge denselben Wert
console.log(navigator.product);

Gecko

React Native von Browsern unterscheiden

const isReactNative =
  typeof navigator !== 'undefined' && navigator.product === 'ReactNative';

const isBrowser =
  typeof window !== 'undefined' && typeof document !== 'undefined';

console.log({ isReactNative, isBrowser });

{ isReactNative: false, isBrowser: true } // im Browser

Besser: Feature Detection statt product-Abfrage

// Schlecht: sagt nichts über die vorhandenen Funktionen aus
if (navigator.product === 'Gecko') {
  console.log('Das ist in JEDEM Browser wahr');
}

// Gut: direkt prüfen, ob die benötigte API existiert
if ('clipboard' in navigator && 'writeText' in navigator.clipboard) {
  await navigator.clipboard.writeText('Hallo Welt');
  console.log('In Zwischenablage kopiert');
} else {
  console.log('Clipboard-API nicht verfügbar');
}

Das ist in JEDEM Browser wahr In Zwischenablage kopiert

// Wichtig · Fallstricke

Nicht zur Browser-Erkennung geeignet: Alle Browser geben "Gecko" zurück, auch solche mit Blink- oder WebKit-Engine. Wenn du darauf prüfst, ist die Bedingung immer wahr.
Veraltet: Die Eigenschaft steht nur aus Kompatibilitätsgründen im HTML-Standard. Verwende stattdessen Feature Detection oder, falls wirklich nötig, navigator.userAgentData (User-Agent Client Hints, bisher nur in Chromium-Browsern).
In älteren Firefox-Versionen ließ sich der Wert über die Einstellung general.useragent.product ändern. Heute ist er fest vorgegeben.
Außerhalb von Browsern gibt es Abweichungen: React Native liefert "ReactNative". In Node.js gibt es erst ab Version 21 ein globales navigator, und dort ist product nicht definiert. Prüfe deshalb vorher mit typeof navigator !== 'undefined'.
Verwandt ist navigator.productSub. Auch diese Eigenschaft ist veraltet und liefert feste Werte ("20030107" bzw. in Firefox "20100101").

Siehe auch

Navigator NavigationHistoryEntry.url Navigator.productSub Navigator.contacts Navigator.gpu