smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Online- bzw. Offline-Status des Browsers erkennen – 1. Ansatz

4. April 2013
Stephan
Online- bzw. Offline-Status des Webbrowsers erkennen

Im Rahmen von HTML5 wurden einige Neuerungen vorgestellt und eingeführt, die es ermöglichen offline-fähige Webapplikationen zu erstellen. Zu diesen Neuerungen zählen vorwiegend der Application Cache und die verschiedenen Möglichkeiten zum Speichern von Daten auf Clientseite mittels der WebStorage API, IndexedDB API und der File API.

Interessant hierbei ist nun, wie man eigentlich feststellen kann, ob der Webbrowser online oder offline ist. Es wäre z.B. wünschenwert, dass beim Wechsel vom Offline- in den Online-Betrieb die client- und serverseitig gespeicherten Daten automatisch synchronisiert werden.

Eine Möglichkeit den Online- bzw. Offline-Status des Webbrowsers zu erkennen, ist es die Eigenschaft window.navigator.onLine zu verwenden. Zusätzlich gibt es noch zwei Events mit denen der jeweilige Status erkannt werden kann.

Status ermitteln

Um nun den Verbindungsstatus des Webbrowsers zu ermitteln, können wir folgenden Code nutzen:

if(window.navigator.onLine) 
{
    console.log('Online');
} 
else 
{
    console.log('Offline');
}

Die Eigenschaft gibt true zurück, wenn der Webbrowser online ist und ansonsten false.

Status-Wechsel erkennen

Um nun zu erkennen, ob der Webbrowser vom Online- in den Offline-Betrieb (oder umgekehrt) wechselt, gibt es die Events onOnline und onOffline. Mit reinem JavaScript könnt ihr wie folgt auf die Events reagieren bzw. sie binden:

window.addEventListener('online', function(event) 
{
    console.log('Online');
});

window.addEventListener('offline', function(event) 
{
    console.log('Offline');
});

Mithilfe von jQuery würde es so aussehen:

$(window).bind('online', function(event) 
{
    console.log('Online');
});

$(window).bind('offline', function(event) 
{
    console.log('Offline');
});

Problem Browser-Kompatibilität

Leider ist die Erkennung des Status über window.navigator.onLine und den vorgestellten Events nicht verlässlich. Das liegt vor allem an der unterschiedlichen Interpretation des Offline-Status in den einzelnen Webbrowsern.

Näheres zu der Problematik findet ihr sowohl in der WHATWG-Spezifikation als auch in einem Mozilla-Artikel zu diesem Thema.

Fazit

Mit der vorgestellten Methode ist es theoretisch möglich den Online- bzw. Offline-Status des Webbrowsers zu ermitteln. In der Praxis sieht es aber so aus, dass ihr euch auf window.navigator.onLine nicht verlassen könnt.

Demnächst stelle ich euch weitere Möglichkeiten vor, den Status des Webbrowsers zu erkennen.

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!