Progressive Web App Tutorial, Teil 2: Das Web-App-Manifest

Im zweiten Teil des Tutorials zur Progressive Web App wird der Grundstein für die Installierbarkeit gelegt. Die Erstellung des Web-App-Manifests.

Im ersten Teil des Tutorials ist erklärt, was eine Progressive Web App überhaupt ist und was für Anforderungen dafür gestellt sind. Hier geht es zum ersten Teil.

Die Aufgabe des Web-App-Manifests

Das Web-App-Manifest ist eine JSON-Datei, die auf dem Webserver abgelegt und im Quelltext der Webanwendung eingebunden wird. Diese Datei hat drei Hauptaufgaben:

1. Unterscheidung zwischen Webseite und Web-App

Ist die Datei vorhanden und von Crawlern zu finden, ist dies ein wichtiges Kriterium. Denn so können die Anbieter erkennen, ob es sich um eine normale Webseite oder um eine Progressive Web App handelt. Findet Bing ein solches Manifest, kann die App auch über den Microsoft Store zu finden sein.

2. Installierbarkeit und Erscheinungsbild

Erst durch ein vorhandes Web-App-Manifest stellen Browser den Button zur Installation zur Verfügung. Installation bedeutet in diesem Fall mehr als das Hinzufügen eines Icons auf den Homesreen. Damit die App auch ohne Internetverbindung funktioniert, können die dafür erforderlichen Dateien ebenfalls mit installiert werden.
Auch die Optik der Progressive Web App wird im Manifest festgelegt. Technisch gesehen bleibt es ja eine Webseite, das Erscheinungsbild des Browsers kann jedoch angepasst werden. Die typischen Browserleisten wie Eingabefeld und Menü können ausgeblendet werden, auch ein Vollbildmodus (ideal für Spiele) ist möglich.

3. Symbole auf dem Homescreen

Auch die Symbole auf dem Homescreeen werden durch das Manifest definiert. Durch ein individuelles Icon und Namen bekommt der Nutzer den Eindruck einer nativen App. Unter Android wird allerdings in der unteren rechten Ecke ein kleines Browser-Icon eingebunden – was den Eindruck dann doch etwas trübt. Vielleicht verschwinden diese aber auch mit der Zeit.

Manifest im Format JSON

Das Web-App-Manifest ist eine reine Textdatei, die im JSON-Format aufgebaut sein muss. Hier mal ein Beispiel:

Besonders im Bereich „icons“ ist hier eine verkürzte Fassung mit den nötigsten Einträgen zu sehen. Vieles ist vermutlich selbsterklärend, dennoch gibt es jetzt zu jedem Eintrag eine kurze Erklärung.

dir – die Leserichtung
Mit der Eigenschaft „dir“ wird die Leserichtung bestimmt. Also ob er der Text von Links nach Rechts (ltr) oder von Rechts nach Links läuft (rtl).

lang – die Sprache
Mit dieser Eigenschaft wird die Sprache angegeben, für die die Webseite bestimmt bzw. in der sie verfasst ist.

name – Name der PWA
Hier wird der vollständige Name der Progressive Web App angegeben.

short_name – der kurze Name
Bei langen Namen der App ist auch eine kürzere Variante sinnvoll. Diese wird dann an Stellen angezeigt, wo nicht ausreichend Platz für den vollständigen Namen ist.

description – die Beschreibung
In der Beschreibung bitte den Nutzer darüber informieren, was die Web-App macht und tut.

background_color – Hintergrundfarbe beim Start
Startet die App und die Inhalte erscheinen nicht sofort (lange Ladezeiten) kann mit dem Setzen der Hintergrundfarbe beim Ladebildschirm der Übergang zu den Inhalten weniger abrupt gestaltet werden. Hat die Webseite also Weiß als Hintergrundfarbe, sollte diese hier auch angegegben werden.

theme_color – Erscheinungsbild beim Betriebssystem
Die theme_color beeinflusst die Darstellung des Betriebssystems. Zum Beispiel die Einfärbung in der Übersicht der geöffneten Apps.

start_url – die „Homepage“
Bei dieser Einstellung sollte der Zweck selbsterklärend sein. Hier wird die Startseite der App angegeben.

scope – der Arbeitsbereich
Mit der Scope-Einstellung wird dem Browser mitgegeben, in welchem Arbeitsbereich er sich an die Einstellungen des Manifests halten soll. Ist hier der Wert „.“ (Punkt) angegeben, bezieht sich dies auf den gesamten Ordner. Steht hier app.domainxy.de der Nutzer landet aber auf test.domainxy.de, öffnet der Browser die neue Seite im klassischen Webbrowser.

display – Eigenschaften des Browsers
Die Eigenschaft „display“ bestimmt den Look des Browser. Als Werte sind hier fullscreen, standalone, minimal-ui und browser vorgesehen.
Mit fullscreen verdeckt die Anwendung auch die Notification-Bar am oberen Bildrand (für Spiele gedacht), standalone agiert wie eine native Anwendung, minimal-ui zeigt minimale Schaltflächen wie vor und zurück und browser zeigt das normale und gewohnte Browserfenster.

orientation: hochkant oder seitlich?
Der Wert orientation bestimmt die Ausrichtung der Web-App. Soll diese sich beim Drehen des Handys nicht mitdrehen, muss hier der Wert „portrait-primary“ gesetzt sein.
Möglich sind any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary.

Mehr Icons gehen natürlich auch

Aus Platzgründen ist beim obigen Beispiel nur ein Icon eingefügt. Das ist allerdings für die Vielzahl an Systemen, Auflösungen und Bildschirmgrößen eindeutig zu wenig. Und so ist es sinnvoll, Icons in möglichst vielen Größen anzubieten.
Auf die betriebssystemabhängige Darstellung wird in einem späteren Teil noch eingegangen.

Hinzufügen des Web-App-Manifestes in den Quelltext

Schlussendlich muss die Manifest-Datei noch im Quelltext der Webseite eingefügt werden. Das geschieht im Head-Bereich des HTML-Codes mit folgender Codezeile:

Glückwunsch, damit ist die Grundlage für die Progressive Web App gelegt. Direkt installierbar ist das in der Form aber noch nicht nicht, dafür muss zunächst ein Service-Worker erstellt werden. Was ein Service-Worker ist und was er alles kann, wird im dritten Teil dieses Tutorials das Thema sein.

Trotzdem einmal ein kleiner Vorgeschmack, wie die Installierbarkeit einer Webseite später aussehen kann:

 

Wenn Chrome die PWA korrekt erkennt, bietet er in der URL-Leiste einen kleinen Plus-Button an. Damit kann der Anwender die Installationsaufforderung aktivieren.
Das ist aber nicht die einzige Möglichkeit, den Nutzer zur Installation zu bringen diese Aufforderung lässt sich auch auf der Webseite direkt anzeigen.

Diese Funktionalität ist Thema des dritten Teils.

Hier geht es zum ersten Teil des Tutorials.