No Login Data Private Local Save

Web App Manifest Validator - Online Check PWA Manifest

19
0
0
0

PWA Manifest Validator

Validate your Web App Manifest for installability, completeness, and best practices

Note: The URL must be publicly accessible and allow CORS. If blocked, use the Paste tab instead.
Frequently Asked Questions

A Web App Manifest is a JSON file that provides metadata about your Progressive Web App (PWA). It tells the browser how your app should behave when installed on a user's device, including the app name, icons, display mode, theme colors, and more. The manifest is linked in your HTML using <link rel="manifest" href="/manifest.json"> and is essential for making your web app installable.

The most critical required fields include: name or short_name (at least one must be present), start_url, display (should be "standalone", "fullscreen", or "minimal-ui"), and icons (with at least one 192x192 and one 512x512 icon for full installability). Additional recommended fields include theme_color, background_color, description, and scope.

The 192x192 icon is used for the app's home screen icon on most Android devices and for the splash screen. The 512x512 icon is required for the Web App Install Banner to appear on Android (Chrome requires at least a 512x512 icon for the install prompt). It's also used for larger screens, the app launcher, and the PWA splash screen on high-resolution devices. Providing both ensures broad device compatibility.

Four display modes are available: standalone (looks like a native app with no browser UI), fullscreen (no status bar, fully immersive), minimal-ui (minimal browser controls), and browser (normal browser tab). For most PWAs, standalone is recommended as it provides the best native-app-like experience while retaining essential OS-level controls like the status bar.

Add a <link> tag in the <head> section of every HTML page:
<link rel="manifest" href="/manifest.json">
Also ensure your server serves the file with the correct MIME type: application/manifest+json. For full PWA support, you'll also need a service worker registered on your pages.

While the spec allows SVG icons, browser support is limited. Chrome on Android currently does not support SVG icons for PWA installation. For maximum compatibility, use PNG or WebP format icons. Always include at least PNG icons at 192x192 and 512x512 sizes. You can additionally provide SVG for browsers that support it, but don't rely on SVG alone.

The scope property defines the set of URLs that the browser considers to be within your app. When a user navigates outside the scope, the browser opens a normal web page instead of staying within the PWA window. The scope is typically set to your app's root path (e.g., "/" or "/app/"). If not specified, the browser defaults to the directory containing the manifest.

Common reasons include: missing or invalid manifest, no 512x512 icon, missing service worker with a fetch handler, website not served over HTTPS (except localhost), manifest not linked correctly, display not set to standalone/fullscreen/minimal-ui, or the user has previously dismissed the prompt. Use this validator to check your manifest and also verify your service worker registration and HTTPS setup.

name is the full app name (up to 45 characters) displayed in the app install prompt and splash screen. short_name (up to 12 characters, recommended) appears below the app icon on the home screen and in the app launcher. If short_name is not provided, the browser truncates name for the home screen label, which may result in an awkward display. Providing both gives you full control over how your app name appears in different contexts.

You should validate your manifest every time you make changes to it, and periodically as browser requirements evolve. It's also good practice to validate after deploying updates, especially if you've added new icons, changed the app name, or modified the scope. Regular validation helps catch issues before they affect your users' ability to install or use your PWA.
🔧 Related Tools