Manifest.json: die Vorteile
Apple, Google und Microsoft setzen weiter auf das Web App Manifest. Füll es einmal aus, und deine Icons, deine Theme-Color und deine Analytics sitzen überall an der richtigen Stelle.
Was dir das Manifest bringt
| Vorteil | Was du bekommst |
|---|---|
| Install-Prompts, die sich nativ anfühlen | Chrome, Edge und Android zeigen „App installieren“-Banner nur, wenn dein Manifest icons, name, start_url und den Display-Modus deklariert. |
| Offline-taugliche Splash-Screens | Das Manifest gibt dir Kontrolle über Splash-Bilder, Hintergrundfarben und Maskable-Icons, damit der Offline-Start bewusst gestaltet wirkt. |
| Konsistente Metadaten überall | Wenn Suchmaschinen oder soziale Plattformen dein Manifest auslesen, greifen sie denselben Titel, dieselbe Theme-Color und dieselben Icons ab, die du kuratiert hast. |
Anatomie eines modernen Manifests
Das sind die Felder, die Lighthouse und Android tatsächlich prüfen, bevor sie dein Icon anzeigen.
| Feld | Warum es existiert | Profi-Tipp |
|---|---|---|
| name & short_name | Steuert das Install-Banner und den Label-Text im Launcher. | Halte short_name unter 12 Zeichen, damit es auf Android-Homescreens nicht abgeschnitten wird. |
| icons[] | Legt fest, welche PNGs die Installations-Oberflächen, Splash-Screens und Maskable-Logos speisen. | Nimm die Größen 192, 256, 384 und 512 mit purpose: "any maskable" für die beste Abdeckung auf. |
| start_url | Bestimmt, welche Route sich öffnet, wenn ein Nutzer die App aus dem Dock startet. | Häng ?source=pwa an und lies es serverseitig aus, um deine Analytics anzupassen. |
| display | Wechselt zwischen den Erlebnissen standalone, fullscreen und minimal-ui. | Nutze standalone plus theme_color, damit es zum Chrome deiner Marke passt. |
Wo die Manifest-Icons anfangen
Start-JSON
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Leg diese Datei unter /public/manifest.json ab, und der Generator in Favicon Tools hält das Icon-Array aktuell, sobald du ein neues Set exportierst.
Release-Checkliste
Häng dir das an dein Deployment-Dashboard, damit das Manifest auch nach Rebrandings korrekt bleibt.
- 1
Das Manifest ausliefern und verlinken
Liefere das Manifest unter /manifest.json aus und binde es über <link rel="manifest" href="/manifest.json"> ein.
- 2
Prüfen, dass jedes Icon auflöst
Stell sicher, dass jedes referenzierte Icon tatsächlich auf deiner CDN existiert und der deklarierten Größe entspricht.
- 3
Das Browser-Chrome angleichen
Füge theme-color- und background_color-Meta-Tags hinzu, um das Browser-Chrome an die Palette deines Icons anzupassen.
- 4
Vor dem Release linten und auditieren
Führe vor jedem Release npx next lint plus das PWA-Audit von Lighthouse aus, um fehlende Manifest-Felder zu erkennen.
- 5
Den Scope der installierten App setzen
Setze den Scope des Manifests auf deine primäre App-URL, damit installierbare Shortcuts innerhalb deiner Domain bleiben.
Updates automatisieren
Speichere dein Manifest-Template neben deiner Icon-Konfiguration. Wenn die CI ein neues Favicon-Set baut, aktualisiere das JSON und deploye beides gemeinsam neu.
Wie eine native App testen
Installiere deine Seite auf iOS, Android und im Desktop-Chrome. Prüfe, ob Splash-Screen, Icon-Maske und Theme-Color den Werten aus dem Manifest entsprechen.
QA-Teams mögen eine einfache Checkliste: installieren, offline starten, die Icon-Qualität prüfen, den Analytics-Parameter verifizieren.