WebApp

Eine Webseite als App starten oder gar installieren?

Geht das? Das geht. Mit dem Web-App-Manifest.

 

W3C Web App Manifest

Das Dilemma

Webseite oder App? Jeder Betreiber einer Webseite steht (auch heute noch) vor dem Problem der mobilen Nutzbarkeit. Die Datenübertragung und die Verfügbarkeit der Netze sind mittlerweile bei weitem ausreichend. Die Zahlen der mobilen Nutzer überholen den Desktop und wachsen nach wie vor. Nicht umsonst ist das Stichwort „Responsive Design“, also die flexible und von jedem Endgerät bedienbare Darstellung, ein Dauerbrenner. Und nicht umsonst drehen sich die Design-Ansätze immer mehr in Richtung „Mobile-First“.

Darstellung und Bedienung

Eigentlich sollte jede Webseite auch auf mobilen Geräten nutzbar sein. Die Datenübertragung ist heutzutage kein Problem mehr. Allerdings gibt es nach wie vor fundamentale Unterschiede in der Benutzerführung:

PC Mobile
Klicken Tippen
Ziehen Wischen
… Mehrfinger-Gesten
Rechtsklick …
Hover …

Auf dem PC kann ich etwas anklicken, auf dem mobilen Gerät antippen. Auf dem PC kann ich Elemente mit der Maus verschieben (ziehen), auf dem mobilen Gerät kann ich mit dem Finger über den Schirm wischen. So weit so gemeinsam. Was der PC nicht kann: Mehrfinger-Gesten. Auf dem mobilen Gerät kann ich zwei Finger auflegen und z.B. die Darstellung vergrößern. Was der PC kann: Rechtsklick und Hover. Dabei kann ich auf ein Kontextmenü zugreifen, oder mit der Maus über einem Element stehen bleiben um zum Beispiel eine Hilfe zu bekommen (Tooltip). Auf dem mobilen Gerät fehlt diese Option. Es gibt Versuche zu Kontext und Hilfe mit einem „an tippen und halten“, aber wer nicht weiß was ein Icon bedeutet traut sich nicht es an zu tippen, wer weiß was passiert?

Davon abgesehen gibt es das Problem der Bildschirm-Größe. Am PC sind Widescreen-Monitore, 20 oder mehr Zoll und sogar HD-Auflösungen nicht mehr unüblich. Dementsprechend können viele Elemente auf dem Schirm verteilt werden ohne die Übersicht zu verlieren. Am anderen Ende der Messlatte sind Handys mit 4-5 Zoll vertreten. Tablets treten mit 10-11 Zoll auf und die Netbooks und Ultrabooks mit 12-13 Zoll schließen die Lücke zu den ersten Laptops mit 14 Zoll. Wo die Laptops enden beginnt dann auch schon wieder der PC-Bildschirm. Wenn die Smart-Watches weitere Verbreitung finden werden wir bald auch mit Bildschirm-Größen unter 4 Zoll konfrontiert, da denkt man schon fast an die Zeiten der ersten Handys mit Internet-Anschluss und WAP zurück.

Die Möglichkeiten

Der erste Schritt scheint offensichtlich: die Webseite je nach Auflösung in jeder Form bedienbar machen. Das Problem ist bekannt, das gab es schon in den Anfangszeiten des HTML, als die ersten Bilder und Designs auf dem Bildschirm Platz finden sollten. Da die Sachlage sich in puncto Darstellung und Bedienbarkeit stark verschärft hat ist ein neues Schlagwort um diese Thematik entstanden „Responsive Design“. Gleichzeitig entstanden erste Frameworks die einem die Arbeit abnehmen sollen, das bekannteste dürfte Bootstrap sein.

Neben der geschickten Erstellung der Webseite gibt es noch andere Möglichkeiten: Apps. Eine kleine Anwendung die native auf dem mobilen Gerät läuft scheint eine gute Methode um auf jeder Plattform passende Darstellung und Bedienung zu gewährleisten. Für viele Web-Anwendungen mit Funktionalitäten jenseits der bloßen Darstellung von Information schien das bisher sinnvoll. Google-Kalendar Beispielsweise kann im Web-Frontend genau so wie in der App auf dem Handy bedient werden. Der Nachteil? Man muss die Code-Basis sowohl der App als auch der Webseite pflegen und vor allem synchron halten. Zudem installiert nicht jeder Anwender sofort die neueste Version. Wir haben also das alte Problem des Versionsmanagements wir früher auf dem Desktop, das wir ja mit einer Web-Anwendung eigentlich nicht mehr haben müssten. Erschwerend hinzu kommt das wir eigentlich mindestens zwei oder drei Apps entwickeln müssen: Android, iOS und WindowsPhone. Inklusive der Modalitäten in den jeweiligen App-Stores. Das bringt doch ein wenig Verwaltungsaufwand mit sich. Ist das wirklich gerechtfertigt? Im 21. Jahrhundert so eine Bürokratie zu betreiben?

Ein Kompromiss scheint die HTML5-App zu sein. Hier können wir mit den von der Webseite bekannten Technologien (HTML5, CSS, JavaScript) eine App bauen die auf allen Geräten läuft. Nachteil ist hierbei das wir, wie bei einer Webseite im Browser, nur eingeschränkten Zugriff auf die Hardware des mobilen Gerätes haben. Außerdem können wir diese App nicht im App-Store platzieren. Der Benutzer muss sie sich also von der Webseite herunter laden und die Installation aus fremden Quellen erlauben. Ganz zu schweigen davon das wir wieder zwei Code-Archive haben.

Bei all der App-Entwicklung bleibt uns die geschickte Darstellung der Webseite aber trotzdem nicht erspart. Auch wenn wir eine App haben kann der Benutzer die Seite mobil aufrufen. Und dann wollen wir sie ja trotzdem benutzbar halten, oder? Ergo: App hin oder her, unsere Webseite muss so oder so auch als Webseite mobil bedienbar sein.

Der Brückenschlag: WebApp-Manifest

Wenn unsere Webseite ohnehin auf jedem Gerät abrufbar ist, und wir ohnehin alle denkbaren Bildschirmgrößen in Betracht ziehen müssen, warum müssen wir dann das ganze noch mal in eine App verpacken?

Müssen wir nicht. Das W3C hat eine Technik ins Leben gerufen die es uns gestattet eine Webseite wie eine App zu installieren. Mit Hilfe des WebApp-Manifest. Dabei handelt es sich um eine Datei im JSON-Format, in der alle nötigen Informationen hinterlegt sind um die Webseite mit einem direkten Zugriff auszustatten. Anstatt mir die zu einer Webseite passende App aus meinem Playstore zu laden, sage ich meinem mobilen Gerät einfach das es die Webseite als App auf meinem Gerät installieren soll. Fertig. Klingt zu schön um wahr zu sein? Ist es derzeit auch noch.

Bei der Technologie handelt es um ein W3C Working Draft. Die Technik ist in Arbeit, wird noch weiter entwickelt. Einige Schwachstellen sind bekannt und sollen noch behoben werden (zum Beispiel gibt es derzeit keinen Update-Mechanismus für die Manifest-Datei). Allerdings bietet die Technik bereits Spielraum für erste Versuche. Der Google-Chrome gestattet es, mit Hilfe der Option „Zum Startbildschirm hinzufügen“. Verfügt eine Webseite über eine entsprechende Manifest-Datei, legt der Google-Browser eine Verknüpfung auf dem mobilen Gerät an. Danach kann die Webseite direkt über diese Verknüpfung aufgerufen werden, und stellt sich auf dem Gerät wie eine nativ installierte App dar.

Beispiel

Füge diese Zeile in den Header einer beliebigen Webseite ein:

<link rel="manifest" href="mainpage.webmanifest">

Und erstelle eine passende Datei „mainpage.webmanifest“ mit folgendem Inhalt:

{
	"name": "ReLast WebApp",
	"short_name": "ReLast",

	"icons": [
	  {
	    "src": "img/icon.png",
	    "sizes": "64x64",
	    "type": "image/png",
	  }
	],
	"start_url": "http://www.relast.de/",
	"display": "standalone"
}

Fertig ist die WebApp. In diesem Fall würde, wenn man die Seite aufruft und zu seinem Startbildschirm hinzufügt, ein Icon auf dem Bildschirm liegen das beim Start die Webseite „www.relast.de“ als App ausführt. Testen kann man das natürlich auf der entsprechenden Seite: ReLast. Weitere Details zu der Technologie, den Attributen und Möglichkeiten der Manifest-Datei finden sich ebenfalls dort: http://www.relast.de/knowhow/webapp

Vorteile

Die Vorteile sind relativ offensichtlich:

  • Keine Apps pflegen (erst recht nicht mehrere)
  • Nur eine Code-Basis
  • stets aktuelle Version (der Vorteil der Web-Anwendung ist wieder da)
  • verschiedene Anwendungs-Bereiche der Webseite leicht durch unterschiedliche Manifest-Dateien abbildbar

Nachteile

Einige Nachteile basieren auf dem Status der Technologie. Es handelt sich um ein „Living Document“, ein „Working Draft“. Also keine fertige, veröffentlichte Technik. Einige der Probleme sind auch bereits bekannt und werden behandelt (siehe Aktualisierungsfunktion), andere basieren schlicht auf dem frühen Stadium der Technik (siehe Verbreitung).

  • mangelnde Verbreitung
  • umständliche Installation
  • keine Aktualisierungsfunktion für Manifest-Dateien (Issue 446)
  • beschränkter Zugriff auf Hardware

Fazit

Die WebApp scheint ein hervorragender Lösungsansatz zu sein. Es muss nur eine Code-Basis gepflegt werden und das „Responsive Design“ ist ohnehin notwendig. Allerdings wirken die Nachteile derzeit noch schwer. Allen voran die Installation. Diese ist derzeit noch zu kompliziert. Der nächste logische Schritt scheint die Option zu einem Link zu sein. Kann ich meinen Besuchern einen Link anbieten mit dem sie die Webseite als App installieren können würde das schon enorm helfen. Das zweite große Problem ist die Update-Möglichkeit. Ein mal installiert hat ein aktualisiertes Manifest-File keine Auswirkungen auf bereits installierte Apps. Hier braucht es eine Möglichkeit auf neue Manifest-Dateien zu prüfen. Das Problem mit dem Zugriff auf Hardware bleibt inhärent bestehen. Hier kollidieren Interessen, Webseiten die Zugriff auf Hardware erhalten sind eine Sicherheitserwägung.

Schlussendlich lässt sich sagen: wenn die Installation vereinfacht wird, Aktualisierungen der Manifest-Dateien bemerkt werden und der Zugriff auf Hardware möglich ist, wird diese Technik eine Basis finden. Vor allem die ersten beiden Punkte stehen aus meiner Sicht einer Verbreitung der Technologie im Wege. Hierfür müssen Lösungen geschaffen werden.

Das Potential dieser Technik ist in meinen Augen trotzdem maßgeblich.

Was sollte ich tun?

Was heute schon jeder tun kann? Ein erstes kleines Manifest erstellen, und ein Icon hinterlegen. Wenn ein Benutzer es möchte kann er die Webseite schon mal abspeichern. Und ein Update-Mechanismus für die Manifest-Dateien wird sicher noch kommen. Also:

  1. Icon erstellen
  2. Start-URL festlegen
  3. Manifest erstellen
  4. Manifest verlinken

Have fun!

 

http://www.relast.de/knowhow/webapp

https://www.w3.org/TR/appmanifest/

 


,