Signatur
Beschreibung
WorkerNavigator.language ist das Gegenstück zu Navigator.language für Worker-Kontexte (Dedicated Worker, Shared Worker, Service Worker). Über self.navigator.language bzw. kurz navigator.language erfährt ein Worker, welche Sprache der Benutzer bevorzugt. In der Regel ist das die Sprache der Browser-Oberfläche.
Der Wert ist ein Sprach-Tag nach BCP 47, etwa "de", "de-DE", "en-US" oder "zh-Hant-TW". Er entspricht normalerweise dem ersten Eintrag von navigator.languages.
Typische Einsatzfälle sind Formatierungen mit der Intl-API direkt im Worker, etwa bei Datums-, Zahlen- oder Währungsangaben in Berichten, die im Hintergrund erzeugt werden. Auch sprachabhängiges Sortieren großer Datenmengen mit Intl.Collator gehört dazu, ebenso die Auswahl lokalisierter Ressourcen in einem Service Worker. So müssen diese Aufgaben nicht erst den Hauptthread durchlaufen.
Hat der Benutzer die Sprache geändert, meldet der Browser das mit dem Ereignis languagechange am globalen Worker-Objekt. Worker, die lange laufen, können darauf reagieren und ihre Formatierer neu aufbauen.
Rückgabewert
"de-DE" für die bevorzugte Sprache des Benutzers. Die Eigenschaft ist schreibgeschützt.Beispiele
Sprache im Dedicated Worker auslesen
// main.js
const worker = new Worker('worker.js');
worker.onmessage = (event) => console.log('Worker meldet:', event.data);
// worker.js
self.postMessage(`Bevorzugte Sprache: ${navigator.language}`);Zahlen und Datumsangaben im Worker lokalisiert formatieren
// worker.js
const locale = navigator.language;
const currency = new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' });
const dateFmt = new Intl.DateTimeFormat(locale, { dateStyle: 'long' });
self.onmessage = ({ data }) => {
const report = data.map(({ datum, betrag }) =>
`${dateFmt.format(new Date(datum))}: ${currency.format(betrag)}`
);
self.postMessage(report);
};
// main.js
const worker = new Worker('worker.js');
worker.onmessage = ({ data }) => console.log(data);
worker.postMessage([{ datum: '2024-03-15', betrag: 1234.5 }]);Service Worker: lokalisierte Offline-Seite wählen und auf Sprachwechsel reagieren
// sw.js
const SUPPORTED = ['de', 'en', 'fr'];
const pickLang = () => {
const base = (navigator.language || 'en').split('-')[0].toLowerCase();
return SUPPORTED.includes(base) ? base : 'en';
};
let lang = pickLang();
self.addEventListener('languagechange', () => {
lang = pickLang();
});
self.addEventListener('fetch', (event) => {
if (event.request.mode !== 'navigate') return;
event.respondWith(
fetch(event.request).catch(async () =>
(await caches.match(`/offline.${lang}.html`)) ?? Response.error()
)
);
});// Wichtig · Fallstricke
- Schreibgeschützt: Wer den Wert zuweist, zum Beispiel mit
navigator.language = 'en', erreicht nichts. Der Versuch wird stillschweigend ignoriert und wirft auch im Strict Mode keinen Fehler. - Groß- und Kleinschreibung: Je nach Browser liefert die Eigenschaft
"de-DE"oder"de-de", ältere Versionen teilweise sogar nur"de". Tags am besten mitIntl.getCanonicalLocales()normalisieren oder nur den Sprachanteil vor dem Bindestrich vergleichen. - Kein Ersatz für die Server-Aushandlung: Die Liste im HTTP-Header
Accept-Languagekann vom Wert hier abweichen. Die vollständige Prioritätenliste liefertnavigator.languages. - Datenschutz: Die Sprache ist ein Merkmal für Browser-Fingerprinting. Datenschutz-Modi wie Firefox
resistFingerprintingoder der Tor Browser geben daher unter Umständen einen vereinheitlichten Wert wie"en-US"zurück. - Kompatibilität: Die Eigenschaft wird in allen modernen Browsern in Dedicated, Shared und Service Workern unterstützt. In Worklets (z. B.
AudioWorklet) gibt es keinnavigator.