Webdesign

Heyoffline.js: Freies JavaScript überwacht den Onlinestatus Ihrer Web-App

25. Januar 2013
von

Zu den Neuerungen, die HTML5 mit sich bringt, gehören auch Online- und Offline-Ereignisse, mit denen sich der Status der Internetverbindung abfragen lässt. Gerade für Webapps ist es mitunter wichtig, auf das Vorhandensein einer Internetverbindung reagieren zu können und auf deren Nichtvorhandensein erst recht. Die JavaScript-Bibliothek Heyoffline.js stellt entsprechende Funktionen zur Verfügung.


Heyoffline.js

Verbindungsstatus abfragen

Das Prinzip von Heyoffline.js ist einfach: Sobald der Browser keine Internetverbindung mehr hat, wird per JavaScript eine Meldung ausgegeben, die über den Verbindungsabbruch informiert. Um Heyoffline.js nutzen zu können, genügt es, die JavaScript-Datei im HTML-Kopf einzubinden. Dabei gibt es einige Optionen, mit denen das Verhalten der Bibliothek gesteuert werden kann.

Standardmäßig gibt Heyoffline.js die Warnmeldung immer aus, wenn es zu einem Abbruch der Verbindung kommt. In den meisten Fällen dürfte es jedoch ausreichen, die Meldung nur dann zu zeigen, wenn beispielsweise gerade ein Formular ausgefüllt wird und dieses aufgrund der fehlenden Verbindung nicht abgeschickt werden kann. Hierzu kann Heyoffline.js über die Option „monitorFields“ so konfiguriert werden, dass das Script nur bei Veränderungen an Formularfeldern reagiert:

1
2
3
4
new Heyoffline({
  monitorFields: true,
  elements: ["input", "select", "textarea", "*[contenteditable]"]
});

Über die Option elements gibt man die Elemente an, die überwacht werden sollen. Die Liste im Beispiel entspricht den Standardwerten.


Standard-Warnmeldung

Die Warnmeldung beinhaltet zudem einen Button zum Schließen des Meldungsfensters. Zusätzlich besteht die Möglichkeit, diesen Link nicht darzustellen, so dass die Meldung nicht entfernt werden kann:

1
2
3
new Heyoffline({
  disableDismiss: true
});

In diesem Fall bleibt die Meldung solange stehen, bis die Internetverbindung wiederhergestellt wurde. Da die Warnmeldung über das gesamte Browserfenster gelegt wird, ist es nicht möglich, etwaige Eingabefelder auf der Seite zu bearbeiten. Sicherlich eine relativ drakonische Maßnahme, aber immer noch besser als Datenverlust zu riskieren.

Warnmeldung individualisieren

Heyoffline.js stellt Optionen zur Verfügung, um das Aussehen der Warnung zu individualisieren. So lassen sich Überschrift, Warntext und Buttontext der Meldung selbst festlegen:

1
2
3
4
5
new Heyoffline({
  text.title: "Überschrift",
  text.content: "Warntext",
  text.button: "Warnung schließen"
});

Das per JavaScript generierte Warnfenster besteht aus mehreren HTML-Elementen, die stardmäßig eine Klasse erhalten, die mit dem Prefix heyoffline_ beginnt:

Das Fenster selbst ist ein DIV-Container (heyoffline_modal), in dem ein H2-Element (heyoffline_heading), ein P-Element (heyoffline_content) mit dem Warntext sowie ein A-Element (heyoffline_button) für den Button untergebracht sind. Über die Optionen kann ein eigenes Prefix angegeben werden. Außerdem lassen sich die CSS-Klassen ganz ausschalten:

1
2
3
4
new Heyoffline({
  prefix: "eigeneklasse",
  noStyles: true
});

Fazit: Heyoffline.js ist ein nützliches Tool, um flexibel auf Wechsel im Online-Status der Internetverbindung reagieren zu können. Es ist schnell eingebunden und konfiguriert. Aktuell ist die Version 1.0. Heyoffline.js setzt keine Frameworks voraus und kann unter MIT-Lizenz frei verwendet werden.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!