Online- und Offline-Events

Einige Browser implementieren Online-/Offline-Events basierend auf der WHATWG Web Applications 1.0 specification.

Übersicht

Um eine gute offlinefähige Webanwendung erstellen zu können, muss die Anwendung wissen, wann sie offline ist. Zusätzlich muss die Anwendung wissen, wann die Internetverbindung wieder verfügbar ist. Die Voraussetzungen sind also:

die Anwendung erfährt, wann die Verbindung nach einem Verbindungsabbruch wieder besteht, so dass Änderungen mit dem Server abgeglichen werden können
die Anwendung erfährt, wann die Verbindung abbricht, um so Serveranfragen für später in eine Warteschlange einreihen zu können

Dieser Vorgang trägt dazu bei, Online-/Offline Ereignisse zu trivialisieren.

Oft benötigen Webanwendungen außerdem die Möglichkeit, bestimmte Dokumente im Offline-Cache zu halten. Mehr Informationen darüber gibt es unter Offline resources in Firefox.

API

`navigator.onLine`

navigator.onLine ist eine Eigenschaft mit boole'schem Wert (true für online, false für offline). Sie aktualisiert sich, sobald der Benutzer in den Offline-Modus wechselt, indem der entsprechende Menü-Eintrag angewählt wird (in Firefox: Datei -> Offline-Modus).

Die Eigenschaft aktualisiert sich außerdem, sobald der Browser nicht mehr in der Lage ist, eine Verbindung herzustellen. Gemäß der Spezifikation:

The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...

Firefox 2 aktualisiert diese Eigenschaft beim Wechseln in den Offline-Modus und zurück, sowie beim Abbruch/Wiederaufbau der Netzwerkverbindung in Windows und Linux.

Diese Eigenschaft existierte bereits in älteren Versionen von Firefox und Internet Explorer (die Spezifikation selbst basiert auf den vorherigen Implementierungen), sodass man sie schon jetzt einsetzen kann. Die Autoerkennung der Konnektivität wurde in Firefox 2 implementiert.

"`online`" und "`offline`" Events

Mit Firefox 3 gibt es 2 neue Events: "online" und "offline". Diese werden auf dem <body> jeder Sete ausgelöst, wenn der Browser zwischen Online- und Offline-Modus wechselt. Zusätzlich steigen die Events auf von document.body, zu document, und letztlich zu window. Beide können nicht unterbunden werden (man kann den Benutzer nicht daran hindern, online oder offline zu gehen).

Die Events können auf bekannte Art und Weise registriert werden:

Verwendung von addEventListener auf window, document oder document.body
Zuweisen eines JavaScript Function Objekts auf die Eigenschaften .ononline oder .onoffline von document oder document.body (Hinweis: window.ononline oder window.onoffline funktionieren aus Kompatibilitätsgründen nicht.)
Angeben der Attribute ononline="..." oder onoffline="..." an dem <body>-Tag im HTML-Code.

Beispiel

Es gibt einen einfachen Test, um zu überprüfen, ob die Events funktionieren:

Hier ist der JavaScript-Teil:

window.addEventListener('load', function() {
  var status = document.getElementById("status");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    status.className = condition;
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

Ein bißchen CSS:

#status {
  position : fixed;
  width: 100%;
  font : bold 1em sans-serif;
  color: #FFF:
  padding : 0.5em
}

#log {
  padding: 2.5em 0.5em 0.5em;
  font: 1em sans-serif;
}

.online {
  background: green;
}

.offline {
  background: red;
}

Und das entsprechende HTML:XXX When mochitests for this are created, point to those instead and update this example -nickolay

<div id="status"></div>
<div id="log"></div>
<p>This is a test</p>

Hier ist das Live-Ergebnis:

Hinweise

Wenn die API im Browser nicht implementiert ist, gibt es andere Möglichkeiten herauszufinden, ob der Benutzer offline ist: zum Beispiel durch das Reagieren auf AppCache error Ereignissen oder auf Antworten von XMLHttpRequest.

Verweise

'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification
The bug tracking online/offline events implementation in Firefox and a follow-up
A simple test case
An explanation of Online/Offline events
offline web applications at hacks.mozilla.org - showcases an offline app demo and explains how it works.