Das Web-App-Manifest

Ein Web-App-Manifest ist eine JSON-Datei, die dem Browser mitteilt, wie die Seite als App installiert werden soll: welcher Name verwendet, welches Symbol angezeigt, welche URL gestartet, welches Farbschema angewendet und welcher Anzeigemodus verwendet werden soll (standalone, fullscreen oder browser).

Verweisen Sie auf jeder installierbaren Seite auf das Manifest: <link rel="manifest" href="/manifest.webmanifest"> im Head. Der Browser ruft es einmal ab und speichert es im Cache; Änderungen am Manifest werden bei späteren Ladevorgängen übernommen.

Damit ein Browser die Option "App installieren" anbieten kann, benötigt das Manifest mindestens: name (vollständiger Name), short_name (Bezeichnung auf dem Startbildschirm, etwa 12 Zeichen), start_url, display (normalerweise "standalone") und ein icons-Array mit mindestens einer 192x192- und einer 512x512-PNG-Datei.

Die URL, die gestartet wird, wenn auf das Symbol der installierten App getippt wird. Häufig wird / für die Startseite verwendet; für die Analyse können Abfrageparameter enthalten sein: "start_url": "/?source=pwa" kennzeichnet installierte Sitzungen eindeutig gegenüber Browsersitzungen.

display kann "browser" (normale Browseroberfläche), "minimal-ui" (teilweise Browseroberfläche), "standalone" (keine Browseroberfläche – wirkt wie eine App) oder "fullscreen" (keine Statusleiste) sein. standalone ist die typische Wahl für eine PWA.

Fügen Sie ein Icon mit dem Zweck "maskable" hinzu, damit Android das Icon an die anderen Symbole auf dem Startbildschirm anpassen kann: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Maskable-Icons enthalten eine Sicherheitszone, die das System beim Zuschneiden berücksichtigt.

theme_color legt die Färbung der Adressleiste fest, wenn die App in einem Browser ausgeführt wird. background_color wird vor dem Laden der Seite als Hintergrund des Startbildschirms angezeigt. Stimmen Sie die Werte für einen gelungenen Start auf die Primärfarben Ihres Designs ab.

"orientation": "portrait" sperrt die installierte App im Hochformat. "any", "landscape" und "portrait-primary" sind Alternativen. Die meisten PWAs für allgemeine Zwecke lassen dieses Feld weg und überlassen die Ausrichtung dem Gerät.

Damit der Browser "Installieren" anzeigen kann, muss die Seite über HTTPS bereitgestellt werden, einen Service Worker registrieren, der Fetch-Ereignisse verarbeitet, ein gültiges Manifest mit den Mindestfeldern verknüpfen und Engagement-Kriterien erfüllen (die Nutzerin oder der Nutzer hat mit der Seite interagiert).

Browser speichern das Manifest im Cache. Um nach Änderungen eine Aktualisierung zu erzwingen, ändern Sie die Icon-URLs (ein Cache-Busting-Abfrageparameter funktioniert ebenfalls) oder warten Sie – die meisten Browser prüfen regelmäßig erneut. Es gibt keine API für eine erzwungene Aktualisierung; gehen Sie davon aus, dass Nutzerinnen und Nutzer eine Zeit lang ein leicht veraltetes Manifest verwenden können.

Der Application-Tab in Chrome DevTools zeigt das analysierte Manifest, berechnete Werte und Validierungsfehler. Das Lighthouse-PWA-Audit prüft jede Installationsvoraussetzung und meldet, was fehlt. Verwenden Sie während der Entwicklung beide Werkzeuge, um die Installierbarkeit zu bestätigen.

Das Web-App-Manifest (manifest.webmanifest) teilt dem Browser mit, wie Ihre Seite als App installiert werden soll: name, short_name, start_url, display, theme_color und Icons (192 und 512 sowie ein zusätzliches maskable-Icon für Android). Verknüpfen Sie es über <link rel="manifest"> und stellen Sie für die Installierbarkeit HTTPS und einen Service Worker sicher. Testen Sie im Chrome-DevTools- sowie im Lighthouse-PWA-Audit.