Web-App-Manifest (manifest.json)
Ein Web-App-Manifest ist eine JSON-Datei (meist manifest.json oder site.webmanifest), die aus dem Seiten-Head verlinkt wird und Browsern sagt, wie sich deine Website verhalten soll, wenn sie auf einem Home-Bildschirm oder im Launcher installiert wird. Es liefert den App-Namen, den Icon-Satz, die Theme- und Hintergrundfarben und den Anzeigemodus. Ohne eines bietet ein Browser nicht an, die Website als PWA zu installieren.
Was das Manifest deklariert
Das Manifest ist ein kleines JSON-Dokument, verlinkt mit <link rel="manifest">. Wenn ein Nutzer die Website installiert, liest der Browser es, um die App zu benennen, ein Icon zu wählen, den Splashscreen einzufärben und zu entscheiden, wie viel Browser-Chrome gezeigt wird.
Es ist nur für Installierbarkeit und Home-Bildschirm-Verhalten relevant. Ein normaler Browser-Tab braucht es nie (das decken die Favicon-Link-Tags ab), weshalb viele Websites gar kein Manifest haben.
Ein minimales Manifest
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111111",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Zentrale Felder
| Feld | Zweck |
|---|---|
| name / short_name | Die vollständige und die Home-Bildschirm-Beschriftung |
| icons | Der Icon-Satz für Installation und Home-Bildschirm |
| display | Wie viel Browser-UI eine installierte App zeigt |
| theme_color | Färbt die OS-UI um die App ein |
| background_color | Die Splashscreen-Farbe beim Start |
| start_url | Die Seite, die die installierte App öffnet |
FAQ zum Web-App-Manifest
Brauche ich ein Web-App-Manifest?
Nur, wenn die Website als PWA installierbar sein soll oder du ihr Home-Bildschirm-Erscheinungsbild steuern willst. Eine schlichte Website mit nur einem Favicon braucht keines.
Was ist der Unterschied zwischen manifest.json und site.webmanifest?
Nichts außer dem Dateinamen. Beide sind dasselbe Web-App-Manifest; der Browser nutzt die Datei, auf die dein <link rel="manifest"> verweist.
Wo verlinke ich das Manifest?
Im Seiten-Head, mit <link rel="manifest" href="/site.webmanifest">. Ein Link auf jeder Seite, die installierbar sein soll.