User-Agent vs. Feature Detection: Was sollte man wann und wie verwenden?

Überblick

Wenn Funktionen je nach Browser- oder Geräteumgebung unterschiedlich bereitgestellt werden sollen, sind User-Agent Sniffing und Feature Detection die beiden typischen Ansätze.
In letzter Zeit wird empfohlen, Feature Detection im Hinblick auf Wartbarkeit und Sicherheit vorrangig einzusetzen.

---

1. User-Agent Sniffing

Dabei wird der User-Agent-String analysiert, um das Gerät oder den Browser zu identifizieren.
Für die Erkennung von Gerätemodellen ist das nützlich, aber es reagiert empfindlich auf Updates, und durch strengere Datenschutzrichtlinien wird die Nutzung zunehmend eingeschränkt.

navigator.userAgentData.getHighEntropyValues(['model', 'platform'])  

---

2. Feature Detection

Hier wird geprüft, ob eine Funktion selbst unterstützt wird, und darauf basierend eine Bedingungsverzweigung vorgenommen.
Das lässt sich unabhängig von Browser- oder Gerätetyp sicher und flexibel anwenden.

if ('fetch' in window) {  
  // fetch API verwenden  
}  

---

3. Bibliotheken: Modernizr & Sniffr

Modernizr ist eine Bibliothek, die Feature Detection komfortabel unterstützt und sich so bauen lässt, dass nur die gewünschten Funktionen enthalten sind.
Sniffr ist eine Bibliothek, die User-Agent-basierte Informationen einfach parst.

---

4. Erkennungsmöglichkeiten je nach Plattform

• Bei Android kann sogar der Modellname (SM-xxxx usw.) ausgelesen werden
• Bei iOS ist eine Unterscheidung zwischen iPhone und iPad möglich, die Modellidentifikation ist jedoch eingeschränkt
• Bei Mac/Windows lässt sich die OS-Version prüfen, die Geräteidentifikation ist jedoch schwierig

---

5. Weitere erkennbare Informationen

• Anzahl der CPU-Kerne: navigator.hardwareConcurrency
• Arbeitsspeicher: navigator.deviceMemory
• Netzwerkgeschwindigkeit: navigator.connection.effectiveType

---

6. Beispiel für einen kombinierten Ansatz

Durch die Kombination von User-Agent und Feature Detection ist eine präzisere Umgebungserkennung möglich.
Zum Beispiel können Notch-Modelle, Apple Silicon und die Unterstützung bestimmter Funktionen gemeinsam beurteilt werden.

environment.supportsServiceWorker = 'serviceWorker' in navigator;  

---

7. Zukunftssicherheit: Privacy Sandbox und User-Agent Reduction

Google reduziert derzeit den User-Agent-String; als Reaktion darauf wird die Nutzung der User-Agent Client Hints API empfohlen.
Diese API stellt Benutzerinformationen strukturierter und datenschutzfreundlicher bereit.

navigator.userAgentData.getHighEntropyValues(['platform', 'model']);  

---

Fazit

• Grundsätzlich sollte Feature Detection priorisiert werden
• User-Agent-basierte Erkennung minimieren und bei Bedarf moderne Technologien (APIs) nutzen
• Um auf künftige Standards vorbereitet zu sein, ist es sinnvoll, auch neue Ansätze wie Client Hints einzuplanen.