User Agent Parser: Browser- und Geräteinformationen entschlüsseln

· 12 Min. Lesezeit

Inhaltsverzeichnis

User Agents verstehen

Jedes Mal, wenn Sie eine Website besuchen, sendet Ihr Browser ein kleines Stück Text, das als "User Agent String" bezeichnet wird. Dieser String zeichnet ein Bild Ihres Browsers, Betriebssystems und seiner Version. Es ist nicht einfach zufälliges Kauderwelsch – jeder Teil des Strings hat seine Aufgabe.

Stellen Sie sich vor, Sie wären eine Web-App. Sie würden wissen wollen, ob der Besucher Chrome oder Safari verwendet, richtig? Dies hilft Websites, Inhalte so zu präsentieren, dass sie den Fähigkeiten des Browsers entsprechen. Zum Beispiel könnte eine Website Animationen für Browser deaktivieren, die sie nicht gut unterstützen, um die Leistung und Benutzererfahrung zu verbessern.

Ein weiteres wichtiges Element ist das Betriebssystem. Websites könnten unterschiedliche Funktionalitäten anbieten, je nachdem, ob sie es mit Windows- oder Mac-Benutzern zu tun haben. Wenn beispielsweise eine Funktion nur mit der neuesten Version von MacOS kompatibel ist, kann das Wissen über das Betriebssystem einer Website helfen, Probleme zu beheben oder den Benutzer direkt über potenzielle Inkompatibilitäten zu informieren.

Den Gerätetyp des Benutzers zu verstehen – wie ein Telefon oder Tablet – ist wie den Raum zu lesen, bevor man eine Rede hält. Es ist ein wesentlicher Schlüssel, um Ihren Ansatz effektiv anzupassen. Mobile Benutzer erwarten andere Interaktionen als Desktop-Benutzer, und responsive Design-Entscheidungen hängen oft von einer genauen Geräteerkennung ab.

Schneller Tipp: User Agent Strings werden automatisch mit jeder HTTP-Anfrage im User-Agent-Header gesendet. Sie müssen nichts Besonderes tun, um darauf zuzugreifen – sie sind bereits in Ihren Server-Logs und Analyse-Tools vorhanden.

Was ist ein User Agent Parser?

Hier kommt der User Agent Parser ins Spiel. Er nimmt diesen String und macht ihn für Sie verständlich. Betrachten Sie ihn als Decoder-Ring, um herauszufinden, welchen Browser und welches Gerät jemand verwendet.

Das ist nicht nur nerdiges Tech-Zeug. Es ist super hilfreich für Analysen, die Anpassung von Benutzererfahrungen und die Behebung von Fehlern. Bedenken Sie, dass 72% der Internetnutzer eine Website vollständig verlassen, wenn sie auf ihrem Gerät nicht gut aussieht. Hier kommt das Wissen über das Gerät Ihres Benutzers ins Spiel.

Ein User Agent Parser nimmt einen rohen String wie diesen:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Und verwandelt ihn in strukturierte, umsetzbare Daten:

Der Parser übernimmt die schwere Arbeit des Musterabgleichs, der Versionsextraktion und der Geräteklassifizierung. Ohne ihn wären Sie damit beschäftigt, komplexe reguläre Ausdrücke zu schreiben und endlose Listen von Browser-Signaturen zu pflegen – ein Albtraum, mit dem kein Entwickler zu tun haben möchte.

Warum User Agent Parsing wichtig ist

Hier ist, warum Entwickler und Unternehmen auf User Agent Parsing angewiesen sind:

Anatomie eines User Agent Strings

User Agent Strings folgen einem halbstandardisierten Format, obwohl sie im Laufe der Jahre zunehmend komplexer geworden sind. Lassen Sie uns die Komponenten aufschlüsseln, denen Sie typischerweise begegnen werden.

Die Grundstruktur

Die meisten User Agent Strings enthalten diese Elemente:

  1. Produkt-Token: Beginnt normalerweise aus historischen Gründen mit "Mozilla/5.0"
  2. Plattforminformationen: Betriebssystem- und Architekturdetails in Klammern
  3. Engine-Informationen: Die Rendering-Engine (wie WebKit oder Gecko)
  4. Browser-Informationen: Der tatsächliche Browsername und die Version

Hier ist ein reales Beispiel zerlegt:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1
Komponente Wert Bedeutung
Produkt Mozilla/5.0 Legacy-Kompatibilitäts-Token
Plattform iPhone; CPU iPhone OS 17_2 Gerät ist iPhone mit iOS 17.2
Engine AppleWebKit/605.1.15 WebKit Rendering-Engine-Version
Browser Safari/604.1 Safari-Browser-Version

Häufige Muster bei verschiedenen Browsern

Verschiedene Browser haben ihre eigenen Eigenheiten in der Formatierung von User Agent Strings. Hier sind einige Beispiele:

Chrome unter Windows:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Firefox unter macOS:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0

Edge unter Windows:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Bemerken Sie, wie Chrome und Edge fast identisch aussehen? Das liegt daran, dass Edge jetzt auf Chromium basiert. Der einzige Unterschied ist das "Edg"-Token am Ende.

Profi-Tipp: Das "Mozilla/5.0"-Präfix existiert aus historischen Kompatibilitätsgründen. In den frühen Tagen des Webs blockierten Server Nicht-Netscape-Browser, also begannen andere Browser, sich als Mozilla auszugeben, um Diskriminierung zu vermeiden. Dieses Erbe besteht heute fort.

Wie man User Agent Strings entschlüsselt

Das manuelle Entschlüsseln von User Agent Strings ist mühsam und fehleranfällig. Deshalb ist die Verwendung eines dedizierten Parsers oder Tools der intelligente Ansatz. Lassen Sie uns sowohl manuelle als auch automatisierte Methoden erkunden.

Manuelles Parsing (nicht empfohlen)

Sie könnten reguläre Ausdrücke schreiben, um Informationen zu extrahieren, aber dieser Ansatz hat ernsthafte Nachteile:

Hier ist ein einfaches Beispiel, wie manuelles Parsing in JavaScript aussehen könnte:

const userAgent = navigator.userAgent;

// Browser erkennen (sehr vereinfacht)
let browser = 'Unbekannt';
if (userAgent.includes('Firefox')) browser = 'Firefox';
else if (userAgent.includes('Edg')) browser = 'Edge';
else if (userAgent.includes('Chrome')) browser = 'Chrome';
else if (userAgent.includes('Safari')) browser = 'Safari';

// OS erkennen (sehr vereinfacht)
let os = 'Unbekannt';
if (userAgent.includes('Windows')) os = 'Windows';
else if (userAgent.includes('Mac')) os = 'macOS';
else if (userAgent.includes('Linux')) os = 'Linux';
else if (userAgent.includes('Android')) os = 'Android';
else if (userAgent.includes('iOS')) os = 'iOS';

Dieser Code ist fragil und übersieht unzählige Sonderfälle. Verwenden Sie dies nicht in der Produktion.

Verwendung eines User Agent Parser Tools

Der bessere Ansatz ist die Verwendung eines dedizierten Parsers. Unser User Agent Parser Tool bietet sofortiges, genaues Parsing ohne jegliche Programmierung.

Fügen Sie einfach einen User Agent String ein und erhalten Sie:

Dies ist perfekt für schnelle Analysen, Debugging oder um zu verstehen, was Ihre Benutzer tatsächlich verwenden, um auf Ihre Website zuzugreifen.

Verwendung von Parser-Bibliotheken

Für programmatisches Parsing in Ihren Anwendungen existieren mehrere ausgezeichnete Bibliotheken:

JavaScript/Node.js:

Python:

PHP:

User Agent Parsing implementieren

Schauen wir uns praktische Implementierungsbeispiele in verschiedenen Programmiersprachen und Frameworks an.

JavaScript-Implementierung

Verwendung der beliebten ua-parser-js Bibliothek:

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...';

parser.setUA(userAgent);

const result = parser.getResult();

console.log(result.browser.name);    // "Chrome"
console.log(result.browser.version); // "121.0.0.0"
console.log(result.os.name);         // "Windows"
console.log(result.os.version);      // "10"
console.log(result.device.type);     // undefined (Desktop)

In einer Webanwendung können Sie direkt auf den Agent des aktuellen Benutzers zugreifen:

const parser = new UAParser(navigator.userAgent);
const result = parser.getResult();

// Erfahrung basierend auf Gerät anpassen
if (result.device.type === 'mobile') {
  // Mobile-optimierte Assets laden
  loadMobileUI();
} else {
  // Desktop-Erfahrung laden
  loadDesktopUI();
}

Serverseitige Implementierung (Node.js/Express)

User Agents aus eingehenden Anfragen parsen:

import express from 'express';
import UAParser from 'ua-parser-js';

const app = express();

app.get('/api/device-info', (req, res) => {
  const parser = new UAParser(req.headers['user-agent']);
  const result = parser.getResult();
  
  res.json({
    browser: result.browser,
    os: result.os,
    device: result.device
  });
});

// Middleware, um geparsten UA zu allen Anfragen hinzuzufügen
app.use((req, res, next) => {
  req.userAgent = new UAParser(req.headers['user-agent']).getResult();
  next();
});

Python-Implementierung

Verwendung der user-agents Bibliothek:

from user_agents import parse

user_agent_string = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X)...'
user_agent = parse(user_agent_string)

print(user_agent.browser.family)  # "Mobile Safari"
print(user_agent.browser.version_string)  # "17.2"
print(user_agent.os.family)  # "iOS"
print(user_agent.os.version_string)  # "17.2"
print(user_agent.is_mobile)  # True
print(user_agent.is_tablet)  # False
print(user_agent.is_pc)  # False

PHP-Implementierung

Verwendung von WhichBrowser/Parser:

<?php
require 'vendor/autoload.php';

use WhichBrowser\Parser;

$userAgent = $_SERVER['HTTP_USER_AGENT'];
$result = new Parser($userAgent);

echo $result->browser->name;     // "Chrome"
echo $result->browser->version;  // "121.0"
echo $result->os->name;          // "Windows"
echo $result->os->version;       // "10"
echo $result->device->type;      // "desktop"

if ($result->isMobile()) {
    // Mobile Inhalte bereitstellen
}
?>

Profi-Tipp: Cachen Sie geparste User Agent Ergebnisse immer, wenn möglich. Das Parsing ist rechnerisch nicht teuer, aber auch nicht kostenlos. In Anwendungen mit hohem Traffic cachen Sie das geparste Ergebnis für jeden eindeutigen User Agent String, um die Leistung zu verbessern.

📚 You May Also Like

Cron Parser Online: Understand and Visualize Cron Expressions DNS Lookup: Resolve Domain Names to IP Addresses MAC Address Lookup: Find Vendor Information for MAC Addresses SSL Checker: Verify Your SSL Certificate Installation