Der Trend hin zur Web-App und weg von nativen Apps wird auch in 2012 ein großes Thema bleiben. Ein Punkt, der bei der Konzeption und Entwicklung von Web-Apps jedoch zumeist vernachlässigt wird ist die Offline-Verfügbarkeit. Der Benutzer kann die Web-App meist im Offline-Modus erst gar nicht öffnen oder bekommt Fehler von der Browser-Engine gemeldet, wenn das Gerät während der Benutzung offline geht.

Um eine offline-taugliche Web-App zu erstellen, die mit einer nativen App mithalten kann, sollte bereits während der Planungsphase ausgearbeitet werden, welche Funktionen nur online möglich sind, welche Daten offline verfügbar sein müssen und welche optional zur Verfügung stehen können.

 

Zunächst muss man den Browser mitteilen welche Daten für den Offline-Betrieb der Webpage benötigt werden. Dies geschieht über das „manifest„-Attribut, dass auf jeder Seite dem html-Tag hinzugefügt werden muss und auf das sogenannte Cache-Manifest verweist.

 

Das Cache-Manifest enthält alle HTML-Seiten, die offline zur Verfügung stehen sollen, und die auf diesen Seiten verwendeten Assets (CSS, JS, Bilder, etc.). Kleiner Tipp: Der Browser erwartet eine Auslieferung des Manifestes mit dem Content-Type „text/cache-manifest“ – andernfalls ignoriert der Browser das Manifest. Alle im Manifest aufgelisteten Ressourcen werden von Browser geladen und lokal gespeichert. Handelt es sich bei der WebApp um eine Sammlung weniger statischer Inhalte sind diese Anpassungen bereits ausreichend, führen aber im Falle von hunderten oder tausenden Seiten bereits zu einem ersten Problem: Extrem viele Requests an den Server obwohl die Daten auf dem Client ggf. nie angezeigt werden und bei großen Datenmengen über langsame Verbindungen nimmt dieser Vorgang auch noch viel Zeit in Anspruch. In mobilen Netzwerken kann daher das Datenkontingent von Benutzern unnötig stark strapaziert werden.

In solchen Fällen muss man auf die Local-Storage-API zurückgreifen, um diese Daten lokal zu persistieren, und entsprechend dynamisch über JavaScript laden. Dies hat zur Folge das „normale“ Links durch entsprechende JavaScript-Aufrufe ersetzt werden müssen. Doch damit ist das Problem noch nicht gelöst – den nun muss der Entwickler sich auch noch darum kümmern die lokal abgelegten Daten zu verwalten um ein unkontrolliertes Anwachsen des Datenbestandes zu vermeiden, bzw. veraltete Daten regelmäßig gelöscht werden müssen.


Das über den Navigator verfügbare ApplicationCache-Object erlaubt eine Abfrage bzw. Benachrichtigung über den aktuellen Status des Offline-Caches. Daher lassen sich auch Lade- und Fortschrittsanzeigen realisieren. Eine weitere wichtige Schnittstelle ist das „navigator.onLine“-Attribut, das eine Abfrage des On-/Offline-Status des Browsers ermöglicht. Das Attribut liefert jedoch nur dann „false“, wenn der Browser explizit in den Offline-Modus versetzt wurde oder sich das Gerät im „Airplane mode“ befindet. Dieses Problem lässt sich jedoch leicht umgehen, indem man einen Test-Request mit einem niedrigen Timeout durchführt – im Fehlerfall ist der Browser offline.

Nachdem nun die Daten behandelt wurden, die Offline verfügbar sein können, bleibt noch der Fall mit Daten, die nur Online verfügbar sind. Hierzu zählt beispielsweise eine Suchfunktion innerhalb eines Online-Datenbestandes, der entweder zu groß oder zu agil ist.

Je nach Anwendungsfall gibt es nun zwei Möglichkeiten:

  • Im Offline-Manifest wird eine Fallback-Seite festgelegt, die anstelle der eigentlichen Seite angezeigt wird.
  • Die Seite wird offline vorgehalten und über JavaScript im Offline-Fall entsprechend reagiert. Hierzu zählt beispielsweise das Entfernen von Elementen aus dem DOM (Document-Object-Model) oder andere Veränderungen, die eine Nicht-Verfügbarkeit von einzelnen Informationen/Elementen deutlich machen. Alternativ können auch entsprechende Meldungen ausgegeben werden, sobald der Benutzer versucht eine Online-Funktion auszuführen.

Zusätzlich lassen sich auch Links bzw. Navigations-Elemente auf den referenzierenden Seiten direkt ausblenden – jedoch sollte der Benutzer nicht durch „plötzlich“ fehlende Menüeintrage verwirrt werden.

Fazit: Eine gut geplante WebApp kann sich im Offline-Modus durchaus mit nativen Apps messen, insbesondere wenn diese über einen nativen Wrapper gekapselt ist und der Entwickler somit auch die Kontrolle über die Lebensdauer des Offline-Cache behält.

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.