Screenshots are the install rubric your PWA listing can't skip

App store users scroll through screenshots before they tap "Install." They're looking for what the app looks like, what it does, and whether it matches their intent. PWAs have the same install decision moment, but without screenshots, the listing feels like a placeholder.

Why this matters

The MDN Web App Manifest screenshots member is metadata for app stores and distribution platforms. It doesn't affect how browsers render your PWA, but it does affect how users evaluate whether to install it from a store listing. A listing without screenshots—or with generic, low-effort captures—signals that the publisher didn't invest in install discovery.

The screenshots member supports optional fields that let you provide platform- and device-specific previews, but if you ignore them, your screenshots might not appear where users see them.

When to include screenshots

Add screenshots when your PWA targets any of these distribution contexts:

• Android app stores (Google Play, alternative Android stores)
• Desktop stores (Microsoft Store, Mac App Store)
• Browser stores (Chrome Web Store, Microsoft Edge Add-ons)
• Marketplace listings that render app preview galleries

If you're only distributing via a direct web install from your PWA's origin URL, the screenshots member won't render—your install prompt will rely on your PWA title, description, and icons alone.

A screenshots quality rubric

Use this checklist to ship screenshots that help users install wisely:

• [ ] Multiple captures: 3-6 screenshots that show different features or flows, not the same UI repeated.
• [ ] Device specificity: Use form_factor: "narrow" for mobile captures and "wide" for desktop/tablet captures so distribution platforms can show the right preview.
• [ ] Platform targeting: Add platform values (android, windows, ios, ipados) when screenshots are optimized for specific OS visual styles.
• [ ] Accessibility labels: Include label for every screenshot with descriptive alt text; platforms use this when rendering previews and for screen readers.
• [ ] Resolution matching: Provide sizes that match the capture (e.g., 1920x1080 for desktop, 750x1334 for mobile) so stores render without scaling artifacts.
• [ ] Format choice: Use WebP or PNG for quality; avoid JPEG compression on UI screenshots with text.
• [ ] Context realism: Show real data, realistic flows, and representative features—don't stage empty states or fill content with placeholder text.
• [ ] Consistent naming: Keep src paths predictable (screenshots/feature-name.device.type) so the manifest is maintainable.

What this means for install conversion

Screenshots are a trust signal. When a user scrolls through your app store preview and sees real, labeled captures of your PWA's interface for their device class, they know what they're installing before they tap install. A listing without screenshots—or with vague, mislabeled, or low-resolution images—looks untested or unfinished.

From a marketplace review standpoint, a PWA listing with no screenshots, only one screenshot, or screenshots without平台或设备区分意味着 install 再现评价不完整。截图成员存在，但安装前预览不可用。

Form factor and platform targeting

Use a combinatorial cover approach when serving multiple platforms:

| Platform | Form factor | Screenshots needed | |----------|-------------|-------------------| | Android | narrow | 3-6 mobile captures | | Android | wide | 2-4 tablet captures | | Windows | wide | 3-6 desktop captures | | iOS | narrow | 2-4 iPhone captures | | iPadOS | wide | 2-4 iPad captures |

Platforms may not display all screenshots you provide. The App Store example in MDN shows horizontally scrollable galleries on narrow screens and full-screen zoom on wide ones.

What to avoid

Don't reuse the same generic screenshot across all platforms, don't omit label (accessibility platforms use it as alt text), and don't skip platform targeting if your PWA lists in stores that filter by OS. One-size-fits-all screenshots look like laziness, not optimization.

Next steps

Read the MDN screenshots reference to understand the form_factor and platform values. Don't ship screenshots without testing how they render in at least one store preview surface.