Web App Manifest Guide: ein echtes manifest.json, Feld für Feld
Das Web App Manifest ist eine kleine JSON-Datei, die dem Betriebssystem sagt, wie es deine Seite installiert: ihr Name, ihre Icons und ihre Farben. Hier ist ein echtes, Feld für Feld.
Wofür das Manifest da ist
Das Manifest ist das, was eine Website in etwas verwandelt, das das Betriebssystem installieren kann. Wenn ein Nutzer deine Seite zu einem Startbildschirm hinzufügt, liest der Browser das Manifest, um Icon, den Namen darunter, den Splashscreen und ob die App mit oder ohne Browser-Chrome öffnet, festzulegen.
Es ist reines JSON. Du brauchst eine Datei, von jeder Seite verlinkt, plus die Icon-PNGs, auf die sie verweist. Jedes Feld unten entspricht etwas, das ein Nutzer sieht.
Die Felder, die zählen
| Feld | Was es steuert |
|---|---|
| name | Der vollständige App-Name, angezeigt im Installations-Prompt und auf dem Splashscreen |
| short_name | Der Name unter dem Startbildschirm-Icon, wo der Platz knapp ist |
| icons | Der Icon-Satz. Enthält 192er- und 512er-PNGs, plus eines als maskable markiert für die Android-Formen |
| theme_color | Die Farbe der OS-Oberfläche rund um die App, etwa der Statusleiste |
| background_color | Der Splashscreen-Hintergrund, der während des Ladens der App angezeigt wird |
| display | Wie die App öffnet. standalone versteckt das Browser-Chrome, damit sie sich nativ anfühlt |
| start_url | Die Seite, die die App öffnet, wenn sie vom Startbildschirm gestartet wird |
Ein vollständiges manifest.json
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}Zwei Standard-Icons und ein maskable, damit Android auf jede Launcher-Form zuschneiden kann, ohne dein Logo abzuschneiden.
Bind es in deine Seiten ein
<link rel="manifest" href="/manifest.json">Setz das in den <head> jeder Seite. Ohne die Link-Tag existiert die Datei zwar, aber nichts liest sie.
Häufige Fragen
Was ist ein Web App Manifest?
Eine kleine JSON-Datei, die Browser und Betriebssystem sagt, wie sie deine Seite installieren: ihr Name, Icons, Farben und wie sie öffnen soll. Sie macht eine Seite auf einem Startbildschirm installierbar.
Was ist der Unterschied zwischen theme_color und background_color?
theme_color färbt die OS-Oberfläche rund um die App, etwa die Statusleiste. background_color füllt den Splashscreen, der während des Ladens der App angezeigt wird. Oft haben sie denselben Wert, steuern aber unterschiedliche Flächen.
Wo lege ich manifest.json ab?
Liefere es von einem stabilen Pfad wie deiner Site-Root aus und referenziere es dann mit <link rel="manifest" href="/manifest.json">. Die Icons, die es auflistet, müssen sich über die Pfade in den src-Feldern auflösen lassen.
Brauche ich ein Manifest für eine normale Website?
Nur, wenn du Installations-Prompts und Startbildschirm-Icons willst. Eine schlichte Info-Seite kommt gut ohne aus, aber jede Seite, die Nutzer auf einem Handy speichern könnten, profitiert davon.