PWA Web App Manifest Validator
Paste your web app manifest JSON code to analyze structure, verify icon properties, and test installable parameters.
Manifest Schema
Validation Reports
PWA Web App Manifests: Enhancing User Actions and Mobile Installs
A **Web App Manifest** is a JSON text file that provides the browser with instructions regarding how your web application should behave when "installed" on a user's mobile device or desktop. It enables Progressive Web App (PWA) behaviors, allowing the site to load in a standalone window, display a splash screen during startup, and declare theme colors.
However, modern mobile OS standards (particularly Google Chrome on Android and Safari on iOS) enforce strict rules for installability prompts. If your `manifest.json` or `site.webmanifest` contains schema formatting bugs, is missing required keys, or fails to define matching icon arrays, the native "Add to Home Screen" install prompts will be blocked. A **PWA Web App Manifest Validator** analyzes your manifest configuration to guarantee seamless installations.
1. Core Properties Required for PWA Installations
For a browser to consider a website an installable Progressive Web App, the manifest must declare these key parameters:
- name: The full name of your app as displayed on splash screens.
- short_name: A short name (max 12 characters) displayed beneath the app icon on the device's home screen.
- start_url: The starting path loaded when the user launches the app from their home screen (usually `/` or `/index.html`).
- display: Set this to
standaloneorfullscreento hide browser address bars, making your site feel like a native app. - icons: An array of icon images in specific dimensions. Chrome requires at least a **192x192px** and a **512x512px** icon.
2. Splash Screens and Color Customization
Custom colors ensure the app fits standard OS theme modes:
- background_color: Used to render the background of the app's splash screen when it is initializing.
- theme_color: Sets the color of the OS status bar or browser interface border. Ensure this color matches the `theme-color` meta tag in your HTML header for consistency.
3. Manifest Verification Table
| Manifest Key | Required Value / Type | Aesthetic & Performance Impact |
|---|---|---|
| short_name | String (< 12 chars) | Prevents name truncation on mobile home screens. |
| display | "standalone" | Essential. Removes web navigation headers so the site behaves like an application. |
| icons.purpose | "maskable" or "any" | Tells Android devices that icons can be cropped into circular or square shapes. |
4. FAQ Section
Q: What is the file extension difference: site.webmanifest vs manifest.json?
There is no functional difference. Both are standard JSON files. However, `.webmanifest` is the official extension registered with IANA for PWA setups, whereas `.json` is a generic extension.
Q: Why is my app install button not displaying on iOS Safari?
Unlike Android (which supports programmatic install prompts), iOS Safari requires users to manually tap the "Share" button and choose "Add to Home Screen". Having a valid manifest ensures the site resolves as a standalone app once added.
Q: Do I need a Service Worker to make my manifest installable?
Yes. Google Chrome requires a registered Service Worker that handles offline resources or basic caching fetch events to satisfy PWA installability requirements.