Browser- und Plattformerkennung in deiner WebApp

Stellen wir uns folgendes Szenario vor: Eine WebApp versucht die native Facebook-App auf dem Smartphone zu öffnen, wobei sich die eigene Fanseite präsentieren soll. Die Implementierung hängt vom System ab. Feature-Erkennung versagt hier – wir müssen tiefer in den Kaninchenbau.

Titelbild

Auf der Suche nach Methoden, wie man den Browser oder die Plattform des Users ermitteln kann, stößt man des Öfteren auf Modernizr, eine nette JavaScript Bibliothek zur Erkennung von nutzbaren CSS- und JS-Features. Modernizr ist praktisch, wenn man wissen möchte, welche Mittel zur Visualisierung und Präsentation zur Verfügung stehen, scheitert aber daran, die Plattform zu verraten. Will man also wissen, ob der User gerade ein iPhone oder Android-Gerät in Händen hält, muss man wohl oder übel auf eine unschönere Lösung zurückgreifen.

Zurück zu unserem Eingangsbeispiel

Feature-Erkennung bringt einen hier nicht weiter, weshalb man mit dem UserAgent-Textbrocken hantieren muss, um an die gewünschte Information zu gelangen.

Der einfachste Fall involviert die simple Suche nach bestimmten Schlüsselwörtern (siehe das navigator-Objekt in JavaScript: navigator.userAgent):

 // überprüfe den UserAgent auf bestimmte Plattform-Wörter und setze die URL dementsprechend
if(navigator.userAgent.match(/iPhone|iPad|iPod/i)){
   fb_app_link = "fb://profile/1234567890/";
}else if (navigator.userAgent.match(/android/i)) {
   fb_app_link = "fb://page/1234567890/";
}else if (navigator.userAgent.match(/Windows Phone/i)) {
   fb_app_link = "fb:pages?id=1234567890";
}else {
   fb_app_link = "https://www.facebook/pages/abcdefgh/1234567890";
}
// leite den Browser zur korrekten URL weiter

Mit dieser Methode ist man nicht von irgendwelchen Plugins oder Bibliotheken Dritter abhängig und hat eine extrem simple und leicht verständliche Lösung, um die Plattform des Nutzers zu erkennen und seine App darauf reagieren zu lassen.

Unglücklicherweise ist der User Agent unberechenbar, da so gut wie jeder Browser etwas dazu dichtet oder falsch meldet (Rendering Engine, Name usw). Dieser Umstand macht die Browsererkennung zu einer ungenauen Wissenschaft.

Welche Browser-Erkennungs-Tools können hilfreich sein?

Wenn man nun wirklich den Browser des Besuchers herausfinden möchte, kann man auf Tools wie WhichBrowser oder Bowser zurückgreifen. Diese Werkzeuge liefern leicht überschaubare Objekte, welche die Browser- und Plattformeigenschaften abbilden. Um der Ungenauigkeit des User Agents vorzubeugen, werden teilweise auch weitere Informationen in Betracht gezogen und so das Ergebnis präziser. Verwendet der Nutzer nun Chrome unter Android? Versuch’s mal mit if(bowser.chrome && bowser.android) { /* magic */ }. Geschmeidig.

Nutze lieber Feature-Erkennung!

Doch selbst wenn man eine gut durchdachte Lösung wie WhichBrowser verwendet, sollte man sich folgendes Zitat aus deren GitHub-Seite zu Gemüte führen:

„This is an extremely complicated and almost completely useless browser sniffing library. Useless because you shouldn’t use browser sniffing. So stop right now and go read something about feature detecting instead. I’m serious. Go away. You’ll thank me later.“

Was übersetzt und runtergebrochen so viel heißt wie „Nutze lieber Feature-Erkennung!“.

Bibliotheken sind nicht dein Ding oder dir geht es nur um eine schnelle Lösung? Fürchte dich nicht! Dir steht es natürlich auch frei, dein Glück mit einer eigenen Lösung auf die Probe zu stellen. Anregungen gibt es dafür genug. Im Prinzip musst du aber nur die mitgesendeten Informationen nach bekannten Wörtern und/oder Mustern durchsuchen und an einen Gott deiner Wahl beten, dass die Angaben der Wahrheit entsprechen und für deinen Zweck ausreichen.