Window Navigator

Browser-Name, -Version und User Agent String

Der User Agent String, der auf dem ersten Blick aussieht, als wäre er eine Hilfe beim Erkennen des Browsers, enthält keine zuverlässigen Informationen. Verschiedene Browser können nahezu identische Namen anzeigen, einige Browser identifizieren sich nicht, um Tests zu entgehen oder die Statistik aufzumischen. Die Version des Betriebssystems hinkt häufig hinterher.

Die Browser kürzen den User Agent String, der Auskunft über Betriebssystem und Browserversion gibt, um den Fingerprint zugunsten des Datenschutz zu reduzieren.

Wer mit Javascript den Browser des Nutzers ermitteln will, darf sich auf die Informationen aus dem Navigator-Objekt nicht verlassen. Aber meistens wollen wir auch gar nicht wissen, welcher Browser anliegt, sondern ob der aktuelle Browser bestimmte Eigenschaften unterstützt: Feature Detection.

window.navigator

window.navigator kann mit oder ohne den Präfix window geschrieben werden.

Die Angaben aus dem navigator-Objekt sind »read only« – können nur gelesen werden (klar!).

Wenn doch einmal alle Browser so harmonisch wirken würden wie beim appCodeName! Ob IE, Opera, Safari oder Firefox: appCodeName ist immer Mozilla im stillen Gedenken an den Urvater aller grafischen Browser.

Wie zuverlässig ist navigator.platform? Mein iPad zeigt unter navigator.platform tatsächlich iPad an, das iPhone aber MacIntel und selbst auf einem Apple M1 zeigt Chrome MacIntel. Chrome und auch der Samsung-Browser auf dem Android-Handy zeigen Linux armv8l.

Server Log Files

Der Webserver sichert die Zugriffe auf die Webseite in den Logdateien und stimmt relativ weitgehend mit dem userAgent von window.navigator überein.

User Agent String (useragentstring.com/index.php)

Feature Detection

Auf der Basis von eigenen Tests kann Javascript Browsern mit speziellen Eigenschaften Extras anbieten. So werden ältere Browser nicht durch Fehler blockiert oder die Eigenschaften können durch ein Polyfill nachgerüstet werden.

Immer noch ist Feature-Detection mit Modernizr die zuverlässige Quelle No 1, aber wir können auch selber anklopfen:

if ("geolocation" in navigator) {
	navigator.geolocation.getCurrentPosition(function(position) {
	…	…	…
	});
} else {
	…	…	…
}

Hilfreich ist auch die Abfrage der vom Browser unterstützten Eigenschaften / Methoden z.B. die CSS @supports-Regel. Die CSS supports-Regel ist nicht auf die Anwendung im CSS beschränkt, sondern Javascript hat ein elegantes Äquivalent

if (CSS.supports("display", "flex")) { 
 …
}

CSS.supports wird von allen modernen Browsern unterstützt, aber nicht von IE bis einschließlich IE11.

navigator.clipboard.writeText

kopiert Text in die Zwischenablage des Benutzers.

Eleganter prüfen, ob der Browser navigator.clipboard.writeText (nicht IE11) beherrscht, um den Text in die Zwischenablage zu kopieren und einen Ersatz anbieten:

document.querySelector(".copythis").addEventListener ("click", function () {
	navigator.clipboard.writeText("Text im Clipboard gelandet").then(function() {
		//console.log ("In die Zwischenablage kopiert")
	}, function() {
		//console.log ("nix da")
	});
});

navigator.platform / Gerät zuverlässig erkennen?

Lassen sich mobile Geräte zuverlässig entdecken? navigator.platform reicht nicht aus. Die folgende Funktion fragt zusätzlich nach Touch-Support.

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform) || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

if (iOS()) {
	console.log ("IOS iPad oder iPhone")
} else {
	console.log ("Nichts davon")
}

Eine Eigenschaft von navigator.platform ist standalone. Das trifft nur zu, wenn Seiten als Progressive Web App installiert sind und im Fullscreen-Modus laufen. Nichts desto Trotz – ein nicht wirklich zuverlässiges Verfahren und entdeckt iPhone und iPad erst ab iOS 13.

Eigenschaften / Methoden von von window.navigator