Web Manifest Validator for Progressive Web Apps
A manifest is the JSON file a browser reads to decide whether an app can be installed and how its window looks. This card runs the same field review the install prompt relies on: names, icon sizes, display mode, colors, scope, and id. Paste the file and the score, check list, and issue cards appear as you type. A complete sample sits one button away if you want to see a full result first.
Check a Manifest Before Shipping
Manifest JSON
Paste the contents of your manifest.json file, or load the sample to see a full pass.
Audit result
The score colors itself by band; each check row and issue card names the field it came from.
How It Works
The audit parses the JSON first and prints any parser message at the top of the issue list so the exact syntax problem is visible before the field results. After a clean parse, each field is tested against the install rules that Chrome and Android apply.
The score is the share of checks that pass, rounded to a whole number. Green appears at 85 and above, amber from 60 to 84, and red below 60, which tracks how close the file is to a clean install.
Icons are counted by size string and purpose token. The checker looks for at least one 192x192 entry for the prompt icon, a 512x512 entry for splash screens and store listings, and a maskable or any purpose so Android can crop the artwork safely.
Theme and background colors are compared with a contrast ratio so splash screen text stays readable; a ratio under 3 to 1 earns a warning. Scope, id, and orientation are checked last, since they only affect an app that is already installable.
| Field | What a failing value does | Usual fix |
|---|---|---|
| name | The install prompt cannot label the app | Full product name, 3 characters or more |
| short_name | Home screen label falls back and truncates | 12 characters or fewer |
| icons | No 192 or 512 entry means no install offer | PNG at 192 and 512 plus a maskable |
| display | App opens in a regular browser tab | standalone for an app-like window |
| start_url | Installed app has no launch address | "/" or a route inside the scope |
Before and After
{
"name": "My App",
"display": "tabbed"
}Score: 20 / 100
Fail: short_name is present
Fail: icon of at least 192x192
Fail: start_url is set
Error: "tabbed" is not a valid displayScore: 73 / 100
Warn: short_name is 22 characters
Warn: no maskable icon purposeScore: 100 / 100
15 checks, 15 pass
2 icons · sizes 192x192, 512x512
purposes any, maskableUse Cases
| Scenario | What to check | Result |
|---|---|---|
| PWA launch checklist | name, short_name, icons, display | Full check list before the install test |
| CMS-exported manifest | JSON syntax and field types | Parser message first, then field issues |
| Icon set update | Sizes and purposes declared | Icon summary line with sizes and purposes |
| Color rebrand | theme_color and background_color | Contrast figure and splash warning |
Common Mistakes
- Shipping only a small icon. Without a 192x192 entry and a 512x512 entry the install prompt never appears on Android.
- Copying the full product name into short_name. The home screen label truncates at about 12 characters on narrow screens.
- Leaving display out. The browser then opens the start URL in a normal tab with the address bar, which reads as a website rather than an app.
- Pointing start_url outside scope. The first navigation leaves the app window and the standalone session ends.
- Picking theme_color and background_color too close together. Splash text loses contrast during launch.
Best Practices
- Declare four icons: a 192 PNG, a 512 PNG, a 512 maskable with padding, and an SVG for crisp scaling.
- Keep short_name at 12 characters or fewer so the home screen label is never cut.
- Set display to standalone so the window opens without browser controls.
- Use "/" for start_url, id, and scope unless the app lives in a subfolder.
- Match theme_color to the title bar color and background_color to the page background, at least 3 to 1 apart.
Frequently Asked Questions
What is a web app manifest?
A manifest is a JSON file, usually named manifest.json, that a page links to in its HTML head. It carries the app name, icon set, launch address, and window style. Browsers read it to offer installation and to paint the standalone window.
Why does short_name affect the install experience?
The home screen and task switcher label comes from short_name first. When the field is missing, the full name is used and the label is cut on narrow screens, so a short value keeps the app identifiable.
Which icon sizes does the install prompt need?
Android asks for a 192x192 icon for the prompt and a 512x512 icon for splash screens and store listings. A maskable purpose tells the system where the safe zone sits so the artwork is not clipped by a rounded or circular frame.
What does the display field change?
display controls the window chrome. standalone removes the address bar and navigation buttons, fullscreen covers the whole screen, minimal-ui keeps a small back control, and browser opens a regular tab.
Does this page upload my manifest?
No. The JSON string is parsed by a function on this page, and every check runs in the tab. The text you paste is not stored and does not leave the browser.
What does the score actually count?
The score is the share of checks that report pass, rounded to a whole number. A check marked skip, such as the general purpose icon check when no icons exist, does not earn a pass point. A 100 score means every check earned its pass.
Why must start_url stay inside scope?
scope tells the browser which URLs belong to the installed app. When the launch address sits outside that path, the first navigation escapes into a normal tab and the standalone window closes.