Um den Verbindungsstatus im Browser zu bekommen, gibt es mehrere Möglichkeiten. Ich möchte hier eine ziemliche nette Library “Offline.js” vorstellen. Diese alarmiert den User automatisch, wenn seine Webanwendung die Internetkonnektivität verloren hat. Offline.js prüft Falschmeldungen, indem es einen Request zu einer Fake-URL startet.

Für den ersten Einsatzzweck gibt es einige Themes, und Konfigurationen sind auch erstmal keine notwendig. Einstellungen wie Delays, einen Check beim Laden der Anwendung, etc. sind konfigurierbar. Auch XHR ist möglich.

Natürlich bieten moderne Browser nativ das Feature an, den Verbindungsstatus zu erkennen und können so bei Veränderungen ein Event starten und den User auf die Konnektivität seines Gerätes aufmerksam machen, hierzu müsste die Anwendung jedoch nativ entwickelt werden um das Feature zu nutzen.

Eine weitere Möglichkeit bietet das Attribut navigator.onLine im zukünftigen W3C-Standard (http://www.w3.org/TR/2011/WD-html5-20110525/offline.html#browser-state).

Offline.js eine sehr nützliche Library, welche aufgrund ihrer Größe von gerade mal 3KB Traffic bei bestimmt vielen Projekten Sinn macht.

Nun ein kleines Beispiel, welches je nachdem ob die Verbindung “up” or “down” ist, die Farbe des body-Tags ändert.

var status;
var output;
var changePlay;

Offline.options = {
    checkOnLoad: true,
    initialDelay: 3,
    requests: true
}

var run = function(){
    if (Offline.state === 'up') {
        Offline.check();
        status = 'on';
    } else if(Offline.state === 'down') {
        status = 'off';
    }
    changePlay();
}

$(document).ready(function(){
    changePlay = function() {
        if (status == 'on') {
            $('#site').css('background-color', '#FFF');
        } else {
            $('#site').css('background-color', '#000');
        }
    }
});
setInterval(run, 5000);

Links

• Homepage: http://github.hubspot.com/offline/docs/welcome
• Dokumentation: http://github.hubspot.com/offline