Web-App-Manifest und Installation

Was macht eine Webseite installierbar?

Ein Web-App-Manifest ist eine kleine JSON-Datei, die dem Browser Name, Symbole und Farben einer Web-App nennt. Mit ihm kann eine Seite auf dem Startbildschirm landen und sieht dann aus wie eine App.

Wer das Manifest lesen und prüfen kann, erkennt, warum ein Browser die Installation anbietet oder nicht. Hier geht es um die Datei und ihre Felder, nicht um einen Store.

Am Ende dieser Lektion

Notiz

Ich kann beschreiben, was eine Web-App installierbar macht, und ein Manifest auf seine Pflichtfelder prüfen.

Schlüsselwörter

Begriff	Was er bedeutet	Beispiel
Manifest	eine JSON-Datei mit Name, Symbolen und Farben einer Web-App	manifest.webmanifest
Installierbar	der Browser bietet an, die Seite auf den Startbildschirm zu legen
Startadresse	die Seite, die beim Start der App zuerst öffnet	start_url
Anzeigemodus	wie die App aussieht, mit oder ohne die Leisten des Browsers	display
Symbol	ein Bild der App für den Startbildschirm, englisch icon
Themenfarbe	die Farbe der Leiste oben, englisch theme_color

Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.

Das Manifest ist eine JSON-Datei mit festen Feldern

Das Manifest liegt neben der Seite und hat meist die Endung .webmanifest. Die Seite verweist mit einem link-Tag darauf. JSON ist ein Textformat aus Schlüsseln und Werten.

Der Browser liest die Datei, wenn er prüft, ob er die Seite als App anbieten kann. Ein Fehler im JSON, etwa ein Komma zu viel, macht die ganze Datei unlesbar.

Ein Beispiel: das Manifest einer Mensa-App

Code: bash

{
  "name": "Mensa am Campus",
  "short_name": "Mensa",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2f6f4f",
  "background_color": "#ffffff",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Das Manifest in Python lesen

Code: python

import json

text = '{"name": "Mensa am Campus", "short_name": "Mensa", "display": "standalone"}'
manifest = json.loads(text)
for feld in ["name", "short_name", "start_url", "display"]:
    print(feld, "vorhanden" if feld in manifest else "fehlt")
# Fügen Sie start_url zum Text hinzu und starten Sie noch einmal.

Das Lab prüft sieben Felder des Manifests

Das Skript des Labs liest das Manifest der Web-App und prüft sieben Felder. Die Ausgabe ist englisch: present heißt vorhanden, MISSING heißt fehlt. Für jedes Symbol steht, ob die Datei existiert (file exists: True).

Notieren Sie, welches Feld fehlt, und überlegen Sie, wozu es dient.

Das Manifest des Labs prüfen

Befehl

docker exec jupyter python3 steps/manifest.py

Hier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.

Die wichtigsten Felder und wozu sie dienen

Feld	Wozu	Beispiel
name	voller Name der App	Mensa am Campus
short_name	kurzer Name unter dem Symbol	Mensa
start_url	Seite, die beim Start öffnet	/
display	Anzeigemodus	standalone
icons	Bilder in mehreren Größen	192x192 und 512x512
theme_color	Farbe der Leiste oben	#2f6f4f
background_color	Farbe, solange die App startet	#ffffff

Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.

Der Anzeigemodus bestimmt, wie viel vom Browser bleibt

Mit browser öffnet die App wie ein normaler Tab. Mit minimal-ui bleibt eine kleine Leiste. Mit standalone verschwinden Adressleiste und Tabs, die App wirkt eigenständig.

Mit fullscreen füllt sie den ganzen Bildschirm, etwa für ein Spiel. Die meisten Web-Apps wählen standalone.

Symbole brauchen mehrere Größen

Ein Telefon braucht das Symbol der App in verschiedenen Größen. Üblich sind 192 mal 192 und 512 mal 512 Pixel, beide als PNG.

Jedes Symbol hat im Manifest einen Pfad (src), eine Größe (sizes) und einen Typ (type). Fehlt die Datei auf dem Server, zeigt das Telefon kein oder ein Ersatzsymbol.

Der Browser entscheidet, ob er die Installation anbietet

Die genauen Bedingungen unterscheiden sich je nach Browser und ändern sich mit der Zeit. Meist gehören dazu eine sichere Adresse mit https, ein Manifest mit Name, Startadresse, Anzeigemodus und Symbolen und eine Seite, die sich laden lässt.

Prüfen Sie im Entwicklerwerkzeug Ihres Browsers den Bereich für die Anwendung. Er nennt, was fehlt.

Ein häufiger Fehler

Warnung

Viele denken, ein Manifest allein mache die Seite installierbar. Es ist nur eine Voraussetzung. Der Browser prüft auch die Adresse, die Symbole und die Startseite, und er darf sich je nach Gerät anders entscheiden.