patternjavascriptModerate
Web App Manifest — making a PWA installable
Viewed 0 times
Web App Manifest W3C spec, Chrome 67+
manifest.jsonPWA installableweb app manifesticons maskabletheme-colordisplay standalone
browser
Problem
A PWA is not installable or gets poor install prompts because the manifest.json is missing required fields or icons do not meet platform requirements.
Solution
Provide a complete manifest.json linked from HTML with all required fields for installability.
// manifest.json
{
"name": "My App",
"short_name": "App", // max 12 chars — used on home screen
"description": "A great app",
"start_url": "/", // app entry point (use '/?source=pwa' to track installs)
"display": "standalone", // fullscreen | standalone | minimal-ui | browser
"background_color": "#ffffff", // splash screen background
"theme_color": "#1a73e8", // browser UI chrome color
"orientation": "any",
"scope": "/",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/icon-512-maskable.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
],
"screenshots": [
{ "src": "/screenshots/home.png", "sizes": "1280x800", "type": "image/png",
"form_factor": "wide" }
]
}
// HTML link
<link rel="manifest" href="/manifest.json">
// manifest.json
{
"name": "My App",
"short_name": "App", // max 12 chars — used on home screen
"description": "A great app",
"start_url": "/", // app entry point (use '/?source=pwa' to track installs)
"display": "standalone", // fullscreen | standalone | minimal-ui | browser
"background_color": "#ffffff", // splash screen background
"theme_color": "#1a73e8", // browser UI chrome color
"orientation": "any",
"scope": "/",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/icon-512-maskable.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
],
"screenshots": [
{ "src": "/screenshots/home.png", "sizes": "1280x800", "type": "image/png",
"form_factor": "wide" }
]
}
// HTML link
<link rel="manifest" href="/manifest.json">
Why
Chrome requires name, icons (192 and 512), start_url, and display to show an install prompt. Missing any mandatory field silently prevents installability — Lighthouse will flag the issues.
Gotchas
- maskable icons need safe-zone padding (at least 10% on all sides) so they display correctly in circular icon masks
- screenshots are required for Chrome's enhanced install dialog on desktop (Chrome 119+)
- theme_color in manifest should match <meta name='theme-color'> in HTML for consistent browser chrome
- short_name is used on limited-space surfaces (home screen) — keep it under 12 characters or it will be truncated
Context
Making any web app installable as a PWA on Android and Chrome desktop
Revisions (0)
No revisions yet.