Mit HTML 5 Web Apps lokal betreiben. Ein Fachartikel der Wünsch AG.
Apps sind zu einem festen Bestandteil unseres Alltags geworden. Immer stärker halten die Apps auch Einzug in die Unternehmensanwendungen. Viele Unternehmen scheuen jedoch die hohen Entwicklungs- und Weiterentwicklungsaufwände für native Apps. Wenn jedoch Offline-Fähigkeiten der App gefragt waren, ging in der Vergangenheit kaum ein Weg an nativen Apps vorbei. Eine Alternative bieten mittlerweile Web Apps, die lokal betrieben werden können.
WEB APPS
Web Apps (Quelle: Wünsch AG)
Web Apps sind, wie der Name schon sagt, Anwendungen, die im Web zu Hause sind. Die Laufzeitumgebung ist also ein ganz normaler Internet Browser. Darin liegt auch schon der große Vorteil dieser Art von Apps. Browser gibt es für fast alle Betriebssysteme unterschiedlichsten Hardwareplattformen. Die App muss also nur einmal entwickelt werden und ist sofort auf allen Plattformen mit Internet Browser lauffähig.
Der Code der Anwendung wird dabei auf einem Web-Server abgelegt, vom Browser geladen und ausgeführt. Die Daten der App liegen üblicherweise ebenfalls auf einem Server im Web. Auf diese Art können Web Apps sehr schnell veröffentlicht und aktualisiert werden.
Daraus ergibt sich aber auch der größte Nachteil von Web Apps:
Sie sind nur dann lauffähig, wenn auch eine Internetverbindung besteht. Web Apps benötigen eine Internetverbindung, um ihren Code und ihre Daten zu laden. Um diesen Nachteil zu eliminieren, wurden in HTML 5 einige Möglichkeiten eingebaut, um sowohl den Code der Anwendung als auch die Daten lokal zwischenspeichern zu können. So sind sie auch dann erreichbar, wenn keine Internetverbindung besteht.
Aus Sicherheitsgründen haben Web Apps keinen oder nur eingeschränkten Zugriff auf Hardwarefunktionen wie z.B. GPS, Kamera o.ä.
WEB APPS LOKAL BETREIBEN
Bei Web Apps kann das Problem der Abhängigkeit von einer laufenden Internetverbindung seit HTML 5 durch lokales Zwischenspeichern umgangen werden.
Damit eine Web App, also eine App programmiert in HTML und JavaScript, lokal ohne Verbindung ins Internet genutzt werden kann, müssen zuerst der Code der Anwendung und alle von ihm benötigten Dateien lokal gespeichert werden. Dazu gibt es in HTML 5 den „Application Cache“. Die App kann in ihrem HTML-Code dem Browser mittels eines „Manifest-Files“ mitteilen, welche Elemente sie für den lokalen Betrieb benötigt. Der Browser prüft dann beim ersten Laden der Anwendung, ob er diese Elemente bereits lokal gespeichert hat. Falls nicht, zeigt er das im Web gespeicherte Element an und beginnt im Hintergrund damit, dieses in einem lokalen Cache zu speichern.
Wenn später dann versucht wird, eine solche Seite mit einem Application Cache Manifest zu laden, so lädt der Browser die Version aus seinem lokalen Application Cache. Dies geschieht auch bei aktiver Internetverbindung, was zu einem schnelleren Laden der Anwendung führt.
Der lokal gespeicherte Anwendungscode wird erst dann wieder aus dem Web aktualisiert, wenn der Browser eine Änderung am Manifest im Web erkennt. Der Speicherplatz, der für eine solche lokal gespeicherte Web App zur Verfügung steht, ist allerdings stark abhängig vom Browser. Einige Browser bieten unbegrenzten Speicherplatz, einige schränken den Speicherplatz auf maximal 5 MB ein.
Sofern die lokal gespeicherte Web App keine Daten aus einer entfernten Datenquelle wie z.B. einer relationalen Datenbank benötigt, wäre sie damit allein schon vollkommen Offline-fähig.
ZUGRIFF AUF WEITERE DATENQUELLEN
Da viele Anwendungen ihre Daten aber zentral auf einem Datenbankserver ablegen, wird für den Zugriff auf die Daten wiederum eine aktive Internetverbindung benötigt. Für diesen Fall gibt es in HTML 5 die Möglichkeit, Daten lokal zwischen zu speichern.
War man hierfür früher auf die sehr begrenzten „Cookies“ angewiesen, um Daten lokal auf dem Gerät des Anwenders zu speichern, bieten heutige HTML 5-fähige Browser einige Möglichkeiten, die wesentlich komfortabler sind und mehr Möglichkeiten bieten. Das kann vom einfachen Key/Value Pair bis zur lokalen SQL Datenbank reichen.
Es gibt allerdings nur zwei Techniken, die wirklich browserübergreifend funktionieren.
Diese Techniken bieten die Möglichkeit, Key/Value Paare von String-Werten lokal zu speichern. Sie unterscheiden sich nur in der Haltedauer der Werte. Bei der einen Variante (Session Storage) werden die Werte nur für die Dauer einer Session gehalten, diese beginnt beim Laden der Seite und endet beim Verlassen der Seite. Bei der anderen Variante (Local Storage) bleiben die Daten auch nach dem Verlassen der Seite erhalten, solange der Benutzer seine lokalen Daten nicht löscht. Auch hier ist der zur Verfügung stehende Speicherplatz vom jeweiligen Browser abhängig. Die Grenzen reichen von 5 MB bis zu unbegrenztem Speicherplatz.
Bei all diesen Techniken muss die App allerdings selbst dafür Sorge tragen, dass die Daten lokal gespeichert und ggf. mit den Daten des Servers synchronisiert werden.
Eine vollwertige Web App bietet aber noch mehr als nur die lokale Speicherung des Codes und der Daten. Native Apps unterscheiden sich auch dadurch von Web Apps, dass sie kein Browserfenster benötigen und dass sie vom „Home Screen“ aus gestartet werden können.
Am meisten Unterstützung erhält der Entwickler einer Web App unter iOS, um die Web App möglichst wie eine native App aussehen zu lassen. Über einige (proprietäre) Angaben im HTML-Quellcode der App, kann z.B. gesteuert werden, dass der Browser seine Adresszeile beim Ausführen der App ausblendet, die App im Vollbildmodus angezeigt wird, ein Link auf dem Home Screen des Benutzers angelegt wird und welches Icon dafür verwendet werden soll.
Teilweise werden diese iOS-spezifischen Angaben auch von anderen Browsern und Plattformen unterstützt. Es gibt aber auch Bestrebungen, solche Angaben zu standardisieren. Die Unterstützung dafür hängt vom jeweiligen Browser des Anwenders ab.
Verpackt in den nativen Rahmen einer Hybrid App, können diese Limitierungen aber abgemildert oder ganz aufgehoben werden. Eine vorausschauende Entwicklung der Web App ermöglicht eine schnelle Portierung der Web App zu einer Hybrid App.