Webapp zum Homescreen hinzufügen und starten

Eine Website kann so gestaltet werden, dass das Aussehen und die Bedienung ziemlich nahe an die einer nativen App herankommt. Solche Websites werden auch Webapps genannt, da sie im Grunde mit denselben Technologien wie bei normalen Websites erstellt werden, jedoch durch zusätzliche Einstellungen, Konfigurationen und evtl. JavaScript-Codes ähnlich wie eine native App funktionieren können.

Beispielsweise kann man die Adressleiste und Schaltflächen des Browsers ausblenden lassen. Eine Möglichkeit, das zu erreichen, bietet die Konfigurationsdatei manifest.json. Der Aufbau der Datei und einige mögliche Einträge werden auf der Seite Webapps erstellen mit manifest.json erläutert. Es ist auch möglich, mittels Local Storage Daten auf dem lokalen Gerät zu speichern, sodass die Website auch ohne Internetverbindung funktionieren kann. So kann man kleine Apps entwickeln, ohne besondere Kenntnisse einer höheren Programmiersprache wie z.B. Java zu besitzen. Denn, auch wenn eine Webapp wie eine native App funktionieren kann, bleiben sie im Grunde Webseiten.

Hat man die Favicons für die Webapp erstellt, braucht man die Webapp nur noch zum Startbildschirm des Geräts hinzuzufügen und zu testen. Dabei sei an dieser Stelle erwähnt, dass man nicht nur Webapps zum Homescreen hinzufügen kann, sondern auch normale Webseiten. Die nachfolgende Beschreibung und die Screenshots sind auf einem Android-System (Version 5.0) mit dem Browser Chrome erstellt worden. Bei anderen Systemen kann die Vorgehensweise ähnlich sein.

Schritt 1: Zunächst wird die Website ganz normal über den Browser aufgerufen. Öffnet man das Browsermenü, kann man den Punkt "Zum Startbildschirm hinzufügen" auswählen.

Schritt 2: Daraufhin wird ein Dialogfeld geöffnet, in dem man den Titel für die Webapp eingeben kann.

Schritt 3: Nach einem Klick auf die Schaltfläche "Hinzufügen" sollte für die Webapp ein Eintrag auf dem Homescreen mit dem vergebenem Titel erstellt werden. Als Icon wird automatisch eine geeignete Bilddatei aus den Einträgen gewählt, die man in der Konfigurationsdatei manifest.json angegeben hat und die auf dem Server vorhanden sein müssen. Hierbei werden verschiedene Einträge für unterschiedliche Pixel-Dichten angegeben. Diese Icons werden auf Mobilgeräten auch Launcher-Icons genannt.

Schritt 4: Die Webapp wird über das Icon wie eine native App gestartet. Der Browser sollte keine Adressleiste und sonstige Schaltflächen enthalten bzw. sollte so aussehen, wie es in der Datei manifest.json vorgegeben wurde. Ob die Ausrichtung des Webapps Hoch- oder Querformat ist, kann in der Konfigurationsdatei manifest.json vorgegeben werden.