So erkennen Sie den Online- und Offline-Status in JavaScript

Ihre App funktioniert einwandfrei – bis ein Benutzer mitten in der Sitzung die Verbindung verliert und nichts mehr funktioniert. Die Erkennung des Online- und Offline-Status in JavaScript ermöglicht es Ihnen, angemessen zu reagieren: Zeigen Sie ein Warnbanner an, pausieren Sie Netzwerkanfragen oder versuchen Sie es automatisch erneut, wenn die Verbindung wiederhergestellt ist. So funktioniert es zuverlässig.

Die schnelle Antwort: navigator.onLine und Window-Events

Der Browser stellt zwei Werkzeuge für die JavaScript-Online-/Offline-Erkennung bereit:

• navigator.onLine — eine boolesche Eigenschaft, die Sie jederzeit auslesen können
• online- und offline-Window-Events — werden ausgelöst, wenn sich der Verbindungsstatus ändert

Zusammen decken sie die beiden Szenarien ab, die für Sie relevant sind: Statusprüfung beim Laden der Seite und Reaktion auf Änderungen.

Auslesen von navigator.onLine beim Laden der Seite

if (navigator.onLine) {
  console.log('Browser reports online')
} else {
  console.log('Browser reports offline')
}

Dies ist nützlich, um den anfänglichen UI-Status festzulegen, wenn die Seite zum ersten Mal geladen wird – beispielsweise um eine „Sync”-Schaltfläche zu deaktivieren, wenn der Benutzer bereits offline ist.

Lauschen auf Online- und Offline-Events in JavaScript

Das Abfragen von navigator.onLine über einen Timer ist verschwenderisch. Verwenden Sie stattdessen die online- und offline-Events am window-Objekt:

window.addEventListener('online', () => {
  console.log('Connection restored')
  // Re-enable UI, retry pending requests
})

window.addEventListener('offline', () => {
  console.log('Connection lost')
  // Show offline banner, disable network actions
})

Diese Events werden automatisch ausgelöst, wenn der Browser eine Änderung des Netzwerkstatus erkennt, sodass Ihre App sofort reagiert, ohne dass Polling-Overhead entsteht.

Praktisches Beispiel: Anzeigen eines Offline-Banners

Hier ist ein minimales, produktionsreifes Pattern, das beide Ansätze kombiniert:

const banner = document.getElementById('offline-banner')

function updateOnlineStatus() {
  banner.hidden = navigator.onLine
}

// Set initial state
updateOnlineStatus()

// React to changes
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

<div id="offline-banner" hidden>
  You're offline. Some features may be unavailable.
</div>

Dieses Pattern ist sauber, ereignisgesteuert und vermeidet Memory Leaks, da die Listener einmalig angehängt werden und dieselbe Handler-Funktion wiederverwenden.

Die kritische Einschränkung von navigator.onLine

Dies ist der Teil, den die meisten Tutorials unzureichend erklären. navigator.onLine bestätigt keinen tatsächlichen Internetzugang.

• false ist zuverlässig — der Browser ist definitiv offline.
• true bedeutet nur, dass das Gerät mit irgendeinem Netzwerk verbunden ist (einem Router, einem VPN-Adapter, einem LAN). Der Benutzer könnte sich hinter einem Captive Portal befinden, oder Ihr Backend könnte nicht erreichbar sein.

Vertrauen Sie nicht darauf, dass navigator.onLine mit dem Rückgabewert true ein Beweis für Konnektivität ist. Nutzen Sie es als Hinweis darauf, dass der Benutzer möglicherweise offline ist, nicht um zu bestätigen, dass er verbunden ist.

Überprüfung der tatsächlichen Konnektivität mit einer Netzwerkanfrage

Wenn navigator.onLine den Wert true zurückgibt, aber eine kritische Operation fehlschlägt, bestätigen Sie die Erreichbarkeit mit einer schlanken Anfrage an Ihr eigenes Backend:

async function isReachable() {
  try {
    const response = await fetch('/health-check', {
      method: 'HEAD',
      cache: 'no-store',
    })
    return response.ok
  } catch {
    return false
  }
}

Verwenden Sie Ihren eigenen Endpunkt – keine Drittanbieter-URL – um CORS-Probleme zu vermeiden. Eine HEAD-Anfrage an eine kleine, schnelle Route hält die Auswirkungen auf die Bandbreite minimal.

Optional: Die Network Information API

Für Hinweise zur Verbindungsqualität (nicht nur Online/Offline) stellt navigator.connection Eigenschaften wie effectiveType ('4g', '3g', 'slow-2g') und downlink bereit. Die Browser-Unterstützung ist auf Chromium-basierte Browser beschränkt – behandeln Sie es nur als Progressive Enhancement.

Testen des Offline-Verhaltens in den DevTools

Öffnen Sie Chrome DevTools → Tab Network → setzen Sie das Throttle-Dropdown auf Offline. Dies löst das offline-Event aus und setzt navigator.onLine auf false, sodass Sie Ihre UI testen können, ohne Ihren Rechner vom Netz zu trennen.

Fazit

Die Erkennung des Online-Status in JavaScript läuft auf drei Dinge hinaus: Lesen Sie navigator.onLine beim Laden, lauschen Sie auf online/offline-Events für Änderungen und überprüfen Sie die tatsächliche Konnektivität mit einer Fetch-Anfrage, bevor Sie kritische Operationen fortsetzen. Diese Kombination behandelt die überwiegende Mehrheit realer Konnektivitätsszenarien sauber und effizient.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.