Signatur
Beschreibung
WorkerNavigator.userAgent ist das Gegenstück zu Navigator.userAgent im Worker-Kontext. In einem Dedicated Worker, Shared Worker oder Service Worker erreicht man sie über self.navigator.userAgent oder kurz navigator.userAgent. Der Wert ist ein Zeichenkette wie "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36".
Sinnvoll ist die Eigenschaft vor allem für Protokollierung und Diagnose: Ein Worker kann Fehlerberichte oder Telemetriedaten mit dem User-Agent anreichern, ohne dass der Hauptthread ihn per postMessage() übergeben muss. Auch Service Worker können den Wert beim Aufbau eigener Anfragen oder Cache-Schlüssel nutzen.
Für Funktionserkennung ist der User-Agent dagegen ungeeignet: Er lässt sich vom Benutzer bzw. von Erweiterungen verändern, wird von Browsern zunehmend eingefroren („User-Agent Reduction“) und enthält historisch bedingt irreführende Angaben (z. B. „Mozilla“ und „Safari“ in Chrome). Prüfe stattdessen direkt, ob eine API vorhanden ist ('OffscreenCanvas' in self), oder nutze – wo verfügbar – navigator.userAgentData (User-Agent Client Hints).
Rückgabewert
navigator.userAgent im Hauptthread desselben Browsers.Beispiele
User-Agent im Dedicated Worker auslesen
// worker.js
console.log('Worker läuft in:', navigator.userAgent);
self.postMessage({ ua: self.navigator.userAgent });
// main.js
const worker = new Worker('worker.js');
worker.addEventListener('message', (event) => {
console.log('UA aus Worker:', event.data.ua);
console.log('Identisch mit Hauptthread?', event.data.ua === navigator.userAgent);
});Fehlerberichte im Worker mit User-Agent anreichern
// worker.js
const reportError = async (error) => {
await fetch('/api/errors', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message: error.message,
stack: error.stack,
userAgent: navigator.userAgent,
timestamp: new Date().toISOString()
})
});
};
self.addEventListener('message', async (event) => {
try {
const result = JSON.parse(event.data);
self.postMessage(result);
} catch (err) {
await reportError(err);
}
});Service Worker: Client-Hints bevorzugen, userAgent als Rückfall
// sw.js
const getBrowserInfo = async () => {
if (navigator.userAgentData) {
const { brands, mobile, platform } = navigator.userAgentData;
return { brands: brands.map((b) => `${b.brand} ${b.version}`), mobile, platform };
}
// Rückfall für Firefox/Safari
return { raw: navigator.userAgent };
};
self.addEventListener('install', (event) => {
event.waitUntil(getBrowserInfo().then((info) => console.log('SW installiert:', info)));
});// Wichtig · Fallstricke
- Schreibgeschützt: Zuweisungen wie
navigator.userAgent = '…'werden stillschweigend ignoriert (im Strict Mode ggf.TypeError). - Keine Browsererkennung: Der String ist leicht fälschbar und wird durch „User-Agent Reduction“ (Chromium) zunehmend vereinfacht – Versions- und Geräteangaben können ungenau sein. Feature Detection ist stets vorzuziehen.
- Abweichungen möglich: Werden User-Agent-Überschreibungen per DevTools oder Erweiterung gesetzt, wirken diese nicht in jedem Browser zuverlässig auch im Worker-Kontext; der Wert kann dann vom Hauptthread abweichen.
- Datenschutz: Der User-Agent trägt zum Browser-Fingerprinting bei. Beim Protokollieren nur so viel speichern wie nötig.
- Kompatibilität: In allen modernen Browsern in Dedicated, Shared und Service Workern verfügbar.
navigator.userAgentDatagibt es dagegen nur in Chromium-basierten Browsern und nur in sicheren Kontexten (HTTPS).