PWA Web App Manifest Generator — Create manifest.json Online: Free PWA Web App Manifest Generator tool: generate a Progressive Web App (PWA) manifest.json file. Configure app icons, theme colors, display modes.
The Role of the Web App Manifest in Progressive Web Apps (PWAs)
A Progressive Web App (PWA) leverages modern web capabilities to deliver an app-like user experience directly through standard browsers. The foundational configuration blueprint of any PWA is the Web App Manifest (standardized by the W3C as manifest.webmanifest or manifest.json). The manifest is a centralized JSON metadata document informing mobile and desktop operating systems (Android, iOS, Windows, macOS, ChromeOS) how your web application should look, behave, and launch when installed onto the user's home screen or desktop application menu.
Without an authoritative, compliant manifest file, browsers treat your site merely as an ephemeral webpage, preventing automated "Install App" banners, splash screens, and standalone app-window execution.
Core Manifest Properties and Specifications
Under W3C standards, a robust PWA manifest configures several critical operational parameters:
| Manifest Property | Functional Purpose | Implementation Requirement |
|---|---|---|
name & short_name |
name appears in app store prompts and installation dialogues; short_name appears beneath the homescreen icon where space is limited. |
Keep short_name under 12 characters to prevent visual ellipsis truncation. |
display Mode |
Dictates how much browser user interface chrome (URL address bar, back/forward controls, menu buttons) is hidden. | standalone is the gold standard for web apps; fullscreen is preferred for games. |
theme_color |
Sets the default tint color of the operating system status bar, title bar, and app switcher card. | Must match or complement your primary brand aesthetic. |
background_color |
Determines the background canvas color of the automated splash screen rendered while the service worker boots. | Prevents jarring white flashes if your app runs a dark mode theme. |
icons Array |
Declares responsive application icons across varying screen pixel densities. | Mandates at least one $192 imes 192 ext{ px}$ icon and one $512 imes 512 ext{ px}$ icon with purpose: "any maskable". |
Google Lighthouse Installation Criteria
For Chromium-based browsers (Google Chrome, Microsoft Edge, Brave, Samsung Internet) to trigger the native "Install App" prompt, your website must satisfy Google Lighthouse audit prerequisites:
- HTTPS Enforcement: The site must be served over a secure TLS/SSL encrypted origin (or
localhostfor debugging). - Valid Web App Manifest: Containing non-empty
name,short_name,start_url, and at least a $192 ext{ px}$ and $512 ext{ px}$ PNG icon. - Active Service Worker: A registered service worker containing a
fetchevent handler to sustain offline page loading capabilities.
Bridging the Apple iOS PWA Compatibility Gap
While Android and Windows natively ingest manifest.json, Apple Safari on iOS requires legacy proprietary <meta> tags embedded in the page <head>:
<meta name="apple-mobile-web-app-capable" content="yes">: Eliminates the Safari navigation toolbar and URL address bar when launched from the iOS home screen.<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">: Allows web content to flow seamlessly underneath the iPhone notch / Dynamic Island.<link rel="apple-touch-icon" href="/icons/icon-192x192.png">: Informs iOS which high-resolution image to render as the desktop icon.