The Web App Manifest
Define PWA metadata with a manifest.json file.
The Web App Manifest is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What a Manifest Does
A web app manifest is a JSON file that tells the browser how to install the page as an app: which name to use, which icon to display, which URL to launch, what color scheme to apply, and which display mode to render in (standalone, fullscreen, browser).
Linking the Manifest
Reference the manifest from every page that should be installable: <link rel="manifest" href="/manifest.webmanifest"> in the head. The browser fetches it once and caches it; updates to the manifest are picked up on subsequent loads.
<link rel="manifest" href="/manifest.webmanifest">Minimum Required Fields
For a browser to offer "Install app" the manifest needs at least: name (full name), short_name (home-screen label, 12 chars or so), start_url, display (usually "standalone"), and an icons array with at least a 192x192 and a 512x512 PNG.
{
"name": "Coddy Learn",
"short_name": "Coddy",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1f2937",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}start_url
The URL launched when the installed app icon is tapped. Often / for the home page; can include query parameters for analytics: "start_url": "/?source=pwa" tags installed sessions distinctly from browser sessions.
display Modes
display can be "browser" (normal page chrome), "minimal-ui" (some chrome), "standalone" (no chrome — looks like an app), or "fullscreen" (no status bar). Standalone is the typical PWA choice.
Icons and Maskable
Include a "maskable" purpose icon so Android can mask the icon to match other home-screen icons: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Maskable icons include a safe-zone for the system to crop.
theme_color and background_color
theme_color sets the address bar tint when the app is running in a browser. background_color is shown as the splash background before the page loads. Match your design system's primary colors for a polished launch experience.
orientation
"orientation": "portrait" locks the app to portrait when installed. "any", "landscape", "portrait-primary" are alternatives. Most general-purpose PWAs leave this unset and let the device orientation decide.
Install Eligibility
For the browser to show "Install" the page must be served over HTTPS, register a service worker that handles fetch events, link a valid manifest with the minimum fields, and meet engagement heuristics (user has interacted with the page).
Updating the Manifest
Browsers cache the manifest. To force a refresh after edits, change the icon URLs (cache-busting query parameter works) or wait — most browsers re-check periodically. There is no force-update API; design assuming users may run a slightly stale manifest for a while.
Testing the Manifest
Chrome DevTools Application tab shows the parsed manifest, computed values and validation errors. Lighthouse PWA audit checks each install requirement and reports what is missing. Use both during development to confirm install eligibility.
Knowledge Check
What does the display: "standalone" value in a web app manifest do?
Summary
The web app manifest (manifest.webmanifest) tells the browser how to install your page as an app: name, short_name, start_url, display, theme_color, icons (192 and 512, plus maskable for Android). Link it via <link rel="manifest">, ensure HTTPS + service worker for installability, test in Chrome DevTools and Lighthouse PWA audit.
Frequently asked questions
Is the “The Web App Manifest” lesson free?
Yes — the full text of “The Web App Manifest” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “The Web App Manifest”?
Define PWA metadata with a manifest.json file. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The Web App Manifest” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.