Web App Manifest (manifest.json) Validator
Fügen Sie Ihre manifest.json ein, um zu prüfen, ob sie die Installationsvoraussetzungen für PWAs erfüllt. Prüft Pflichtfelder wie name, start_url, display und icons und weist in einer übersichtlichen Liste auf fehlende maskable-Icons hin.
Tipps
- Am besten legen Sie sowohl name als auch short_name fest. Ohne short_name wird die Beschriftung unter dem Icon auf dem Startbildschirm mechanisch aus name gekürzt, was ungünstig aussehen kann.
- Ohne ein Icon mit purpose: "maskable" schneiden manche Android-Geräte das Icon unschön zu oder lassen die Hintergrundfarbe durchscheinen. Ein zusätzlicher maskable-Eintrag im vorhandenen icons-Array behebt das in der Regel.
- Fügen Sie in icons mindestens ein Icon mit 192x192 oder größer hinzu, idealerweise auch eines mit 512x512 oder größer. Ersteres wird für das Icon auf dem Startbildschirm verwendet, Letzteres für den Splash-Screen.
- Die von Browsern wie Chrome tatsächlich angewendeten Installationskriterien für PWAs können sich mit der Zeit ändern. Betrachten Sie die Ergebnisse dieses Tools daher als Orientierungshilfe und nicht als Garantie — eine zusätzliche Prüfung im Application-Panel der Chrome DevTools ist empfehlenswert.
- Eine relative start_url (z. B. "/?source=pwa") funktioniert einwandfrei. Ein zusätzlicher Query-Parameter erleichtert es, in der Zugriffsanalyse PWA-Starts von normalen Browserbesuchen zu unterscheiden.
Häufig gestellte Fragen
Übrigens – Der Zusammenhang zwischen Web App Manifest und PWAs
Das Web App Manifest ist eine JSON-basierte Spezifikation des W3C, die die Informationen deklariert, die nötig sind, um eine Website zum Startbildschirm hinzuzufügen und wie eine native App zu installieren: den App-Namen, Icons, den Anzeigemodus beim Start, die Themenfarbe und mehr. Der Begriff PWA (Progressive Web App) selbst wurde 2015 von Google-Ingenieuren geprägt, und manifest.json ist zusammen mit dem Service Worker, der das Offline-Verhalten übernimmt, einer der beiden zentralen technischen Bausteine dahinter.
Ist die manifest.json nicht korrekt konfiguriert, erkennt der Browser die Website nicht als installierbar und zeigt keine Installationsaufforderung an (etwa das "Installieren"-Banner von Chrome). Probleme wie eine unzureichende Icon-Auflösung oder ein falsch geschriebener display-Wert fallen leicht durch, weil das JSON selbst weiterhin syntaktisch gültig ist — oft bemerkt man sie erst, wenn jemand tatsächlich versucht, die App zu installieren.
Maskable Icons (purpose: "maskable") sind eine relativ neue Ergänzung, die um 2019 eingeführt wurde, um Androids "adaptive Icons" zu unterstützen. Normale Icons werden je nach Gerät zu einem Kreis, einem abgerundeten Quadrat oder einer anderen Form zugeschnitten, sodass bei einem Icon ohne eigenen Rand am Ende ein Teil des Logos abgeschnitten werden kann. Ein maskable Icon muss mit Rücksicht auf eine Sicherheitszone gestaltet werden und wird meist als separater Eintrag neben den regulären Icons bereitgestellt.
Dieses Tool konzentriert sich ausschließlich auf die statische Validierung der manifest.json — es prüft keine weiteren Faktoren, die die tatsächliche Installierbarkeit beeinflussen, etwa ob ein Service Worker registriert ist oder ob die Website über HTTPS ausgeliefert wird. Für die endgültige Bestätigung in der Produktivumgebung empfiehlt sich zusätzlich der Einsatz der Entwicklertools des Browsers (z. B. des Application-Panels der Chrome DevTools).