The Web App Manifest
Write a manifest.json with name, icons, start_url, display, and theme_color so browsers offer an Add to Home Screen prompt.
The Web App Manifest is a free Frontend 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 Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a PWA?
A Progressive Web App is a website with native-app capabilities: installable to home screen, works offline, can receive push notifications. The three core pieces: a Web App Manifest, a Service Worker, and HTTPS.
The Manifest File
The manifest.json (or .webmanifest) is a JSON file describing your app's metadata. Browsers read it to enable 'Add to Home Screen' and to launch your app like a native one.
Basic Manifest
A minimal manifest includes name, icons, start_url, and display mode.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Linking the Manifest
Link it from your HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">display Modes
"display" controls the app's window chrome: "standalone" (no browser UI, app-like), "fullscreen" (immersive, hides status bar), "minimal-ui" (some browser controls), "browser" (regular tab).
Icons — Multiple Sizes
Provide icons in multiple sizes. Modern Android wants 192 and 512; Apple needs additional sizes. Use "purpose": "maskable" for adaptive Android icons.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Apple-Specific Tags
iOS doesn't fully support the manifest. Add Apple-specific meta tags for iOS Add-to-Home-Screen.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Install Prompt
Browsers fire a beforeinstallprompt event when criteria are met (manifest + service worker + HTTPS + user engagement). You can defer it and trigger from your own UI.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Shortcuts (App Shortcuts)
Manifest can declare shortcuts that appear on long-press of the installed app icon.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Categories and Screenshots
Add categories and screenshots for richer install UI on Chrome Android and Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Testing the Manifest
Open DevTools → Application → Manifest. Chrome shows parsed manifest fields, icon previews, and warnings (missing icons, low contrast, etc.).
Frameworks Make This Easy
Next.js: drop manifest.webmanifest in public/. Nuxt: install @vite-pwa/nuxt module. Vite: vite-plugin-pwa generates manifest + service worker automatically.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Quick Check
Which display value in a Web App Manifest makes the installed PWA open without any browser UI, like a native app?
Recap: Web App Manifest
JSON file describing PWA metadata. Include name, short_name, start_url, display, theme_color, icons (multiple sizes + maskable). Link in HTML with rel=manifest. iOS needs apple-specific meta tags. beforeinstallprompt event for custom install UI. shortcuts and screenshots for richer install. Frameworks (Vite PWA, Next, Nuxt PWA) automate generation.
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 Frontend 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 Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “The Web App Manifest”?
Write a manifest.json with name, icons, start_url, display, and theme_color so browsers offer an Add to Home Screen prompt. You practise Frontend 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 Frontend Academy?
No prior experience is required. Frontend 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 Frontend Academy lesson?
Yes. Every Frontend 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.