Add screenshots to the PWA manifest so the install prompt shows the app
- Dominant language
- JavaScript
- Stars
- 5
- Forks
- 1
- Avg merge
- 1h 25m
- Merged PRs (30d)
- 1
Description
Chrome offers a richer install experience — a small preview of the app, rather than a bare name and icon — when the manifest declares screenshots. Toolbox declares none, so both desktop and mobile fall back to the plain prompt.
Chrome says so directly, in DevTools → Application → Manifest on `frappe.tools`:
```
Richer PWA Install UI won't be available on desktop.
Please add at least one screenshot with the form_factor set to wide.
Richer PWA Install UI won't be available on mobile.
Please add at least one screenshot for which form_factor is not set or set to a value other than wide.
```
The live manifest declares `id`, `name`, `short_name`, `description`, `start_url`, `scope`, `display`, `background_color`, `theme_color`, `categories` and `icons`. No `screenshots`.
## Why it is worth having
The install prompt is the one moment a visitor decides whether this is a real application. A name and an icon ask them to take that on trust. A picture of the calculator does not.
It costs two images and a manifest field. Nothing else changes.
## What to add
At least one of each form factor, or Chrome keeps both warnings:
```json
"screenshots": [
{ "src": "/assets/toolbox/pwa/screenshot-wide.png", "sizes": "1280x800", "type": "image/png", "form_factor": "wide", "label": "All tools" },
{ "src": "/assets/toolbox/pwa/screenshot-narrow.png", "sizes": "750x1334", "type": "image/png", "form_factor": "narrow", "label": "Calculator" }
]
```
## Where it goes
The manifest is generated by the build, in `frontend/build/pwaBuildPlugin.js`, so the field belongs there rather than in a checked-in JSON file. The images belong beside the icons in `toolbox/public/pwa/`.
The QA suite can produce them rather than anybody taking them by hand: `frontend/e2e/visual.spec.js` already captures every route at 1280x800 and at 375x812, in both themes, and those images are committed. Two of them are exactly the two form factors Chrome is asking for.
## Also worth doing
`frontend/src/pwa/manifest.test.js` should assert the field exists with both form factors, so this cannot silently regress — and so the next person to read the manifest test learns that Chrome wants it.
## Found by
Opening DevTools on the live site while confirming #271. Neither the QA suite nor CI would have found it: nothing in either reads Chrome's manifest diagnostics, and the manifest is valid without screenshots. Worth remembering as a limit of the automated checks rather than a gap to close — some things only a browser will tell you, and only if you ask it.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in frontend/build/pwaBuildPlugin.js and inspect frontend/src/pwa/manifest.test.js to see how the generated manifest is assembled and tested. Review the existing captures in frontend/e2e/visual.spec.js and the assets beside the icons in toolbox/public/pwa/. Done means the manifest includes wide and narrow screenshots, the referenced images exist, and the manifest test covers both form factors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100