Learn

Debug Installability

Use this flow when the install prompt does not show or the installed app opens incorrectly.

Walkthrough

  1. Open the production or localhost URL.
  2. Open Chrome DevTools, Application, Manifest.
  3. Confirm the manifest URL loads.
  4. Fix missing name, short_name, start_url, scope, display, or icons.
  5. Check that icons load and have correct sizes.
  6. Confirm prefer_related_applications is not blocking browser prompt behavior.
  7. Check whether the app is already installed.
  8. Try manual browser menu install.
  9. If using beforeinstallprompt, confirm the event is supported and not consumed too early.
  10. Install, launch, and confirm start_url stays within scope.

Common Broken Manifest

{
  "name": "Ledger",
  "start_url": "/app/start",
  "scope": "/dashboard",
  "display": "browser",
  "icons": []
}

Problems:

  • start_url is outside scope.
  • display is not app-like.
  • No usable icons.
  • No stable id.
  • Install UI will be poor even if some browser allows manual install.

Fixed Shape

{
  "id": "/",
  "name": "Ledger",
  "short_name": "Ledger",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}