Website als Webapps für Smartphones und Tablets

Auf mobilen Geräten wie Smartphones und Tablets sind viele kleine Programme installiert, die Apps genannt werden. Als Entwickler hat man die Möglichkeit, eine Website neben der normalen Desktop-Version auch als App bereitzustellen. Hierbei wird grundsätzlich zwischen zwei App-Typen unterschieden.

  • Native Apps: Damit sind "echte" Apps gemeint, die in einer Programmiersprache wie z.B. Java (bei Android) oder Objective-C und Cocoa (bei Iphone) geschrieben bzw. programmiert wurden.
  • Web-Apps: Das sind im Grunde gewöhnliche Websites, die z.B. mit HTML und CSS sowie ggf. mit PHP und JavaScript erstellt und in einem Browser angezeigt werden. Auf den mobilen Geräten können die Websites jedoch so angezeigt und bedient werden, als wären es native Apps. Die Benutzer erhalten den Komfort eines nativen Apps, ohne dass man solch eine App programmieren muss. Es sind lediglich einige Einstellungen, Bilder und Konfigurationsdateien notwendig.

Merkmale von Webapps

Dass die Websites so angezeigt werden, als wären es native Apps, wird mit folgenden Änderungen realisiert.

  • Ausblenden der Adressleiste.
  • Ausblenden der Vor- und Zurück-Schaltfläche.
  • Ausblenden sonstiger Menüs des Browsers, z.B. des Aktualisieren-Buttons.

Nachfolgend ein Screenshot von einem Beispiel, bei der eine Webseite als Webapp auf dem Smartphone dargestellt wird.

Webapp Ansicht

Ob man eine Website überhaupt als App bereitstellen sollte und falls die Frage bejaht wird, ob man es als natives App oder Webapp erstellen sollte, lässt sich nicht pauschal festlegen. Einige Vor- und Nachteile beider Varianten sind auf der Seite Unterschiede zwischen nativen Apps und Webapps beschrieben.

Unterschiede zwischen normalen Websites und Webapps

Grob betrachtet gibt es zunächst keine Unterschiede zwischen normalen Websites und Webapps. Beides sind im Grunde Websites und werden im Browser betrachtet und bedient. Webapps haben lediglich die Besonderheit, dass die Adressleiste und einige Schaltflächen und Menüs des Browsers ausgeblendet werden.

Allerdings kann das "Look and feel" von Webapps nahe an das von nativen Apps herankommen, wenn man in diese neue Webtechnologien wie z.B. Local Storage implementiert. Beispielsweise ist es mit Local Storage möglich, Daten clientseitig auf dem lokalen Rechner zu speichern und dadurch Websites offlinefähig zu machen. So können sie auch angezeigt und verwendet werden, wenn keine Internetverbindung besteht.

Das Funktionieren ohne Internetverbindung ist ein wichtiges Merkmal von nativen Apps. Wenn Webapps einige Fensterbestandteile wie z.B. Adressleiste oder Schaltflächen nicht haben und dazu auch noch offline funktionieren, dann könnte man beim Verwenden einer Webapp denken, dass das ein natives App ist, obwohl eigentlich eine Website dahinter steckt. Das wäre bei "normalen" Websites nicht möglich, da hierbei die Fensterbestandteile des Browsers sichtbar sind und man schnell erkennen würde, dass das eine Website ist.

Local Storage und Session Storage

Früher musste man für die Speicherung von clientseitigen Daten auf Cookies setzen. Allerdings haben diese den Nachteil, dass sie nicht beliebig Daten enthalten können und somit gewissen Beschränkungen unterliegen. Außerdem werden damit keine Daten zum Server übertragen. Mit Local Storage werden diese Beschränkungen aufgehoben. Dabei werden mittels JavaScript Daten lokal auf dem Gerät ohne Ablaufdatum gespeichert, die natürlich auch mit verschiedenen Mitteln gelöscht werden können. Wird die Webseite erneut aufgerufen und besteht keine Internetverbindung, können auf die Daten im Local Storage zugegriffen werden, sodass eine Webseite wie gewohnt angezeigt wird. Das kann dazu genutzt werden, um kleine Apps zu entwickeln. Es ist auch möglich, die Daten mit dem Server zu synchronisieren, sobald man mit dem Gerät online ist.

Neben Local Storage gibt es auch die Session Storage. Dabei werden ebenfalls Daten clientseitig auf dem lokalen Gerät gespeichert. Jedoch bleiben die Daten nur für die Dauer einer Sitzung erhalten. Wird das Browserfenster geschlossen, werden die Daten im Session Storage gelöscht und stehen beim erneuten Aufruf nicht mehr zur Verfügung.

Nachteilig ist, dass die Daten nicht browserübergreifend gespeichert werden. Öffnet man die App mit einem anderen Browser, stehen die Daten nicht zur Verfügung. Ein weiterer Nachteil ist, dass Local Storage und Session Storage nur mit modernen Browsern funktionieren. Dieser Punkt sollte jedoch irgendwann keine Rolle spielen, wenn die älteren Browser kaum mehr benutzt werden. Außerdem sind auf mobilen Geräten wie Smartphones und Tablets tendenziell modernere Browser installiert, als auf Desktop-Rechnern, da diese Geräte erst ab ca. 2006/2007 nennenswerte Marktanteile errangen.

Damit ein Webapp sinnvoll bedient werden kann, sollte die Website responsive sein. Hat man sich dazu entschieden, ein Webapp zu entwickeln, kann man das z.B. mit der Datei manifest.json und in folgender Reihenfolge realisieren.

Danach sollte die webbasierte Anwendung ausführlich auf möglichst vielen Geräten testen.