# Web App Manifest file — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-manifest

> Learn to create a manifest.json that tells browsers how to launch and display your PWA.

## The essential idea

The **manifest.json** is a JSON file that describes your app: its name, icons, colors, start URL, and display mode. Browsers use it to install your PWA and customize the launch experience.

## A complete manifest example

This manifest defines app name, icons at multiple sizes, theme color, and display mode.

```json
{
  "name": "My Todo App",
  "short_name": "TodoApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#8f5cf6",
  "scope": "/",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```

Output:

```
Manifest configured for app installation with custom colors and icons.
```

## A common trap

Always provide at least 192x192 and 512x512 icons. Missing icons prevent installation prompts from appearing.

Quick check

**Quiz:** What does the 'display' field control in manifest.json?

- [x] How the app appears when launched (fullscreen, standalone, minimal-ui, browser)
- [ ] The screen brightness and contrast
- [ ] Which languages to support

*Answer:* How the app appears when launched (fullscreen, standalone, minimal-ui, browser). The 'display' field determines the UI of the installed app—standalone makes it look fully native.

## Real-world manifest patterns

Study manifests from Twitter Lite, Spotify, and Pinterest to see production patterns.