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.
Inhaltsverzeichnis
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "dir": "ltr", "lang": "de-DE", "name": "PWA", "short_name": "PWA", "description": "Eine Beispielanwendung als Progressive Web App", "icons": [{ "src": "img/icon256.png", "type": "image/png", "sizes": "256x256" }], "background_color": "white", "theme_color": "#f4f4f4", "start_url": "app.domainxyz.de", "scope": "app.domainxyz.de", "display": "standalone", "orientation": "portrait-primary" } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
"icons": [ { "src": "img/icon48.png", "sizes": "48x48", "type": "image / webp" }, { "src": "img/icon72.png", "sizes": "72x72" }, { "src": "img/icon512.png", "sizes": "96x96 128x128 256x256 512x512" } ] |
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:
1 |
<link rel="manifest" href="/manifest.webmanifest"> |
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:

Installationsaufforderung der PWA
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.
Pingback:Wir bauen eine Progressive Web App (PWA) – Teil 1
Bitte entschuldige, wahrscheinlich übersehe ich es einfach aber: Wo geht es zum nächsten Teil? Teil 3?
Der Pingback führt zurück und die URL zum dritten Teil finde ich leider nicht.
Der ist in der Tat noch nicht fertig…
Wann kommt denn der dritte Teil?
Moin,
erstmal vielen Dank fuer dieses Tutorial.
Nun meine frage: wann darf man denn mit dem dritten Teil rechnen?
Momentan bin ich leider zeitlich nicht dazu in der Lage.
Hallo,
wird es in nächster Zeit noch den nächsten Teil geben?
Matthias
Moin. Schade, dass es nicht für einen dritten Teil gereicht hat. die ersten beiden waren informativ und gut geschrieben.
Gute Gesundheit
Jetzt les ich mir das alles durch und es gibt seit 2020 noch keinen dritten Teil
hey… wird es noch ein drittel teil Geben??? oder kann ich das alles wieder vergessen, was ich gelesen hab?