Native Apps für Smartphones und Tablets sind nach wie vor beliebt, aber nicht immer notwendig. Vieles lässt sich als Webapplikation mit HTML5, CSS3 und JavaScript realisieren. Dank entsprechender JavaScript-APIs hat man beispielsweise Zugriff auf den Orientierungssensor und kann auch Gesten erkennen und entsprechend darauf reagieren. Mit dem WebApp-Manifest ist es zudem möglich, weitere klassische App-Eigenschaften für Webapplikationen zu übernehmen. Dazu gehört unter anderem das Bereitstellen spezieller Launcher-Icons oder eines gesonderten Launcher-Namens, der sich vom häufig langen Titel des HTML-Dokumentes unterscheiden kann.
Manifest erstellen und einbinden
Wer Erfahrung mit dem Programmieren nativer Apps für Android oder iOS gemacht hat, kennt die Einstellungsmöglichkeiten für Apps. Neben Launcher-Icons und -Name kann beispielsweise definiert werden, ob die App nur in einer bestimmten Orientierung oder im Vollbildmodus – also ohne „Action Bar“ – ausgeführt werden soll. Per HTML5, CSS3 oder JavaScript sind solche Eigenschaften für Webapps nicht festlegbar. Allerdings gibt es die Möglichkeit, diese und weitere Eigenschaften in einem sogenannten WebApp-Manifest zu definieren. Es handelt sich dabei um eine Textdatei, welche die verschiedenen Konfigurationseinstellungen in Form eines JSON-Objektes beinhaltet. Die Manifest-Datei wird per „link“-Element im Kopfbereich des HTML-Dokumentes eingebunden.
<link rel="manifest" href="manifest.json" />
Wichtig ist, dass dem „link“-Element per „rel“-Attribut mitgeteilt wird, dass hier eine Manifest-Datei referenziert wird. Im nächsten Schritt werden die einzelnen Eigenschaften, die für die Webapp festgelegt werden sollen, in die Manifest-Datei geschrieben. Diese Manifest-Datei ist nicht zu verwechseln mit der gleichlautenden Datei zur Nutzung des „Application Cache“. Letztere wird über das „<html>“-Element in ein Dokument eingebunden und nicht über ein eigenes „link“-Element.
Webapp aussehen lassen wie native App
Mit einigen Einstellungen im Manifest ist es möglich, eine Webapp so zu starten und aussehen zu lassen wie eine klassische native App. Voraussetzung ist allerdings, dass die Webapp als Verknüpfung auf dem Startbildschirm des Smartphones oder Tablets liegt und von dort aus gestartet wird. Im Chrome gibt es den Menüpunkt „Zu Startbildschirm hinzufügen“. Dadurch wird eine solche Verknüpfung angelegt. Chrome ist derzeit auch der einzige Browser, der das WebApp-Manifest unterstützt.
Im Manifest kann ein vom Standardtitel des HTML-Dokumentes abweichender Name für die Verknüpfung auf dem Startbildschirm angegeben werden. Zwar gibt es mit „name“ und „short_name“ zwei verschiedene Eigenschaften für den Titel der Verknüpfung. „short_name“ überschreibt jedoch immer den Wert „name“. Diese Eigenschaft wird daher ignoriert, wenn auch „short_name“ existiert.
"name": "Langer Name für die Webapp",
"short_name": "Kurzer Name"
Auch das Icon für die Verknüpfung kann per Manifest individuell festgelegt werden. Hierbei lassen sich Icons in unterschiedlicher Größe für unterschiedliche Pixeldichten angeben. Diese werden als JSON-Array referenziert.
"icons": [
{
"src": "launcher-icon-36x36-1x.png",
"sizes": "36x36",
"type": "image/png",
"density": "1"
}
{
"src": "launcher-icon-36x36-2x.png",
"sizes": "36x36",
"type": "image/png",
"density": "2"
}
]
Je nach Gerät wird das passende Icon anhand der in „sizes“ und „density“ definierten Werte ausgegeben. Wird kein maßgenaues Icon gefunden, wird Chrome eines auswählen, welches am ehesten passt.
Normalerweise würde eine Verknüpfung auf dem Startbildschirm als normale Website innerhalb des Browsers aufgerufen – mit entsprechender Navigationsleiste. Mit der Eigenschaft „display“ ist es jedoch möglich, eine Webapp so im Browser darzustellen, dass keine Navigationsleiste sichtbar ist. Optisch ist die Webapp somit nicht von einer nativen App zu unterscheiden.
"display": "standalone"
Neben dem Wert „standalone“, der die Navigationsleiste des Browsers ausblendet, gibt es noch den Wert „fullscreen“. Hierbei verschwindet auch die „Action Bar“ des Gerätes. Vor allem Spiele werden häufig in diesem Vollbildmodus dargestellt. Er ist nicht zu verwechseln mit dem Vollbildmodus des Browsers. Derzeit scheint Chrome die Eigenschaft „fullscreen“ jedoch nicht zu unterstützen. Auf dem getesteten Gerät wird die Eigenschaft jedenfalls ignoriert und stattdessen „standalone“ verwendet, was der vorgegebene Fallback ist, falls „fullscreen“ von einem Browser nicht unterstützt wird.
Für den Nutzer ist die aufgerufene URL aufgrund der ausgeblendeten Navigationsleiste des Browsers nicht sichtbar. Daher blendet dieser bei Seiten, die per Link zu einer anderen Domain führen, am oberen Bildschirmrand eine kleine Statusleiste ein, in welcher die URL der Seite sichtbar ist. So wird sichergestellt, dass der Nutzer immer weiß, wo er sich gerade befindet.
Desweiteren kann man eine Geräteorientierung für die Darstellung der Webapp vorgeben. Damit ist es möglich, unabhängig von der Ausrichtung des Smartphones oder Tablets, eine Webapp immer im Landscape- oder Portrait-Modus, also im Hoch- oder Querformat, laufen zu lassen.
"orientation": "portrait"
Außerdem gibt es die Möglichkeit, eine Start-URL für die Webapp zu definieren. Damit öffnet sich eine vom Startbildschirm aus aufgerufene Website beziehungsweise Webapp mit einer gesonderten URL.
"start_url": "webapp.html"
Ist die Eigenschaft „start_url“ nicht gesetzt, wird immer die URL verwendet, von der aus eine Website dem Startbildschirm hinzugefügt wird. Mit „start_url“ kann man also zum Beispiel dafür sorgen, dass eine Webapp immer mit ihrer Startseite geöffnet wird.
Oftmals ist es für Entwickler interessant, zu erfahren, wann eine Website vom Startbildschirm und wann sie als normale Website aufgerufen wurde. Hierzu lässt sich die Eigenschaft „start_url“ zweckentfremden, indem dort einfach ein Parameter übergeben wird, der anschließend dazu genutzt werden kann, die Aufrufe vom Startbildschirm aus gesondert festzustellen.
"start_url": "webapp.html?startbildschirm=1"
Dieser Parameter kann per JavaScript oder einer serverseitigen Skriptsprache abgefragt werden. So können auch Analytics-Tools entsprechende Rückschlüsse ziehen, von wo aus die Website beziehungsweise Webapp gestartet wurde.
Keine nachträgliche Änderungen der Manifest-Eigenschaften möglich
Ist eine Website als Verknüpfung dem Startbildschirm hinzugefügt worden, ist es nicht möglich, die definierten Eigenschaften für die gesetzte Verknüpfung nachträglich zu ändern. Wird beispielsweise der Wert für „orientation“ geändert, müsste der Nutzer die bestehende Webapp-Verknüpfung zunächst löschen und anschließend die Website erneut zum Startbildschirm hinzufügen. Erst dann wird die Manifest-Datei wieder ausgelesen.
Fazit
Ist eine Webapp einmal als Verknüpfung auf dem Startbildschirm gelandet, ist sie optisch nicht mehr von einer nativen App zu unterscheiden. Mit entsprechender HTML5-Technik können Sie die Webapp wie eine native App auf das Smartphone oder Tablet laden (Stichwort „Application Cache“) und Einstellungen per „Local Storage“ auf dem Gerät speichern. Somit ist nicht zwingend eine Internetverbindung notwendig, um die Webapp aufrufen zu können.
Der einzige Nachteil beim WebApp-Manifest ist die fehlende Möglichkeit, auf einer Website einen Link darzustellen, der die Website auf den Startbildschirm hinzufügt. Bisher muss man den Nutzern erklären, dass sie die Option „Zum Startbildschirm hinzufügen“ aus dem Menü des Browsers aufrufen müssen. Außerdem muss der aktuelle Chrome 39 auf dem Androidgerät installiert sein.
(dpe)
Eine Antwort zu „WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps“
— was ist Deine Meinung?
Sehr interessanter Atikel, Denis!
Danke Dir! Probiere ich gleich mal aus.