Web App Manifest

The manifest is app identity. Treat it like package metadata, not a cosmetic JSON file.

<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0f172a">

{
  "id": "/",
  "name": "Field Ledger",
  "short_name": "Ledger",
  "description": "Offline field ledger for small teams",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "shortcuts": [
    {
      "name": "New entry",
      "url": "/entries/new",
      "icons": [{ "src": "/icons/new-entry.png", "sizes": "96x96" }]
    }
  ]
}

Fields That Matter

Field	Practical rule
`id`	Set it early and keep it stable to avoid identity changes
`start_url`	Use a route that can load reliably and handle auth/offline state
`scope`	Keep it at the app boundary, usually `/` or a sub-app root
`display`	Use `standalone` for most app-like PWAs
`theme_color`	Match the top browser/app chrome color
`background_color`	Match the startup/splash background
`icons`	Provide 192 and 512 pixel icons; include maskable variants
`screenshots`	Improve install UI on surfaces that show richer listings
`shortcuts`	Expose common actions from launcher context menus
capability members	Add only when the capability is implemented and tested

Gotcha: Changing identity fields after users install can create duplicate app identities or break store package metadata. Version manifest changes deliberately.