frappe / frappe/toolbox

Add screenshots to the PWA manifest so the install prompt shows the app

Open
#272 1 comment 0 reactions 0 assignees View on GitHub
enhancement severity:P3
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.