Without a web app manifest, Chrome and Edge suppress the install prompt, iOS Add-to-Home-Screen falls back to a screenshot icon, and Lighthouse flags the site on its PWA audit. Android users who do install the site get a low-resolution thumbnail in the launcher with the document title instead of your short_name, and the splash screen renders as a blank white page instead of branded background_color and theme_color.
Info because the feature gap affects only installed-app users, not core browser functionality.
In Next.js App Router, create app/manifest.ts exporting a MetadataRoute.Manifest object with name, short_name, start_url, display: 'standalone', background_color, theme_color, and at least two icon sizes (192x192 and 512x512). Next wires the <link rel="manifest"> automatically. For other frameworks, drop manifest.json in public/ and link it from the document head.
// app/manifest.ts
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return { name: 'Your App', short_name: 'App', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#000000', icons: [{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' }, { src: '/icon-512.png', sizes: '512x512', type: 'image/png' }] }
}
ID: pre-launch.final-verification.web-manifest
Severity: info
What to look for: Count all web manifest files and references. Enumerate which required fields are present (name, short_name, icons, start_url, display). Check public/ directory for manifest.json or manifest.webmanifest. Check app/ directory for manifest.ts or manifest.js (Next.js App Router convention). Check <head> in layout for <link rel="manifest"> tag. The manifest should include at minimum: name, short_name, icons, and display.
Pass criteria: A web app manifest exists and is linked in the document head, with at minimum name, short_name, and a set of icons defined. At least 4 of 5 required manifest fields (name, short_name, icons, start_url, display) must be present.
Fail criteria: No web app manifest found.
Skip (N/A) when: Skip for API-only projects and internal tools with no public-facing pages. Signal: project type is api or cli, or no HTML pages exist.
Cross-reference: For favicon and icons, see favicon. For apple touch icon, see apple-touch-icon.
Detail on fail: "No web app manifest found — users cannot install the site as a PWA and OS integration features are unavailable"
Remediation: A web app manifest enables Progressive Web App features and improves the install experience:
// public/manifest.json or app/manifest.ts
{ "name": "Your App", "short_name": "App", "icons": [{ "src": "/icon-192.png", "sizes": "192x192" }], "start_url": "/", "display": "standalone" }
// app/manifest.ts (Next.js App Router)
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Your App Name',
short_name: 'AppName',
description: 'What your app does',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
theme_color: '#000000',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
],
}
}
Even if you're not building a full PWA, a manifest improves the mobile "Add to Home Screen" experience and is expected by modern browser quality checks.