Start · Sprachen · JavaScript · Referenz · WorkerNavigator.onLine

WorkerNavigator.onLine

Eigenschaft

Schreibgeschützter boolescher Wert, der innerhalb eines Workers angibt, ob der Browser aktuell als online gilt.

seit JavaScript Baseline: alle modernen Browser (in Workern) Kategorie: webapi

Signatur

WorkerNavigator.onLine

Beschreibung

Die Eigenschaft onLine des WorkerNavigator-Objekts gibt den Netzwerkstatus des Browsers zurück. Sie entspricht navigator.onLine im Hauptthread, ist aber in Web Workern, Shared Workern und Service Workern über self.navigator.onLine (bzw. einfach navigator.onLine) erreichbar.

Der Wert ist true, wenn der Browser annimmt, dass eine Netzwerkverbindung besteht, und false, wenn er sicher offline ist. Ändert sich der Status, werden im globalen Gültigkeitsbereich des Workers die Events online und offline ausgelöst. Beide lassen sich per self.addEventListener("online", …) oder über die Eigenschaften self.ononline bzw. self.onoffline abonnieren.

Typische Einsatzgebiete sind Worker, die im Hintergrund Daten synchronisieren oder Anfragen in eine Warteschlange stellen: Ist der Browser offline, werden Anfragen zwischengespeichert und nach dem Wiederherstellen der Verbindung abgeschickt. Wichtig: true heißt nur, dass eine Netzwerkschnittstelle aktiv ist – nicht, dass das Internet oder dein Server tatsächlich erreichbar ist.

Rückgabewert

Typ
boolean
Beschreibung
true, wenn der Browser als online gilt, sonst false. Die Eigenschaft ist schreibgeschützt.

Beispiele

Status im Dedicated Worker abfragen

// worker.js
const status = navigator.onLine ? 'online' : 'offline';
postMessage({ type: 'network-status', status });

// main.js
const worker = new Worker('worker.js');
worker.addEventListener('message', (event) => {
  console.log('Worker meldet:', event.data.status);
});
Worker meldet: online

Auf Statuswechsel im Worker reagieren

// worker.js
const meldeStatus = () => {
  postMessage({ online: navigator.onLine });
};

// Variante 1: addEventListener
self.addEventListener('online', meldeStatus);
self.addEventListener('offline', meldeStatus);

// Variante 2: on-Properties
// self.ononline = meldeStatus;
// self.onoffline = meldeStatus;

meldeStatus(); // Anfangszustand senden
{ online: true } // nach Trennen des Netzwerks: { online: false }

Warteschlange für Uploads im Worker

// sync-worker.js
const warteschlange = [];

const senden = async (daten) => {
  await fetch('/api/messwerte', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(daten)
  });
};

const abarbeiten = async () => {
  while (navigator.onLine && warteschlange.length > 0) {
    const eintrag = warteschlange[0];
    try {
      await senden(eintrag);
      warteschlange.shift();
    } catch (fehler) {
      // Server nicht erreichbar, obwohl onLine === true
      console.warn('Senden fehlgeschlagen, später erneut:', fehler.message);
      break;
    }
  }
};

self.addEventListener('message', (event) => {
  warteschlange.push(event.data);
  abarbeiten();
});

self.addEventListener('online', abarbeiten);

// Wichtig · Fallstricke

  • Kein Garant für Erreichbarkeit: true bedeutet nur, dass eine Netzwerkverbindung (z. B. LAN, WLAN, virtueller Adapter) besteht. Captive Portals, DNS-Probleme oder ein ausgefallener Server werden nicht erkannt. Fehler von fetch() daher immer zusätzlich behandeln.
  • Nur false ist verlässlich: Meldet der Browser offline, ist er meist tatsächlich offline. Virtuelle Netzwerkadapter (VPN, Docker, VirtualBox) können dagegen fälschlich true ergeben.
  • Der Offline-Modus der Entwicklerwerkzeuge setzt den Wert in Chrome und Firefox auf false; in Firefox löste früher auch „Offline arbeiten“ den Wechsel aus.
  • Die Events online/offline werden am globalen Worker-Objekt (self) ausgelöst, nicht an navigator.
  • Kompatibilität: In allen modernen Browsern in Dedicated, Shared und Service Workern verfügbar. Sehr alte Browserversionen unterstützten onLine in Workern teils nicht – bei Bedarf mit 'onLine' in navigator prüfen.