截图是 PWA 列表不能跳过的安装评价标准

应用商店用户在点"安装"之前会滚动浏览截图。他们在找应用的样子、它能做什么，以及是否符合他们的意图。PWA 也有同样的安装决策时刻，但如果没有截图，列表就像个占位符。

为什么这件事重要

MDN Web App Manifest 的 screenshots 成员是应用商店和分发平台的元数据。它不影响浏览器渲染你的 PWA，但会影响用户是否从商店列表安装你的 PWA。没有截图或截图很泛泛、低质量，说明发布者没有在安装发现上投入。

screenshots 成员支持可选字段，让你提供平台和设备专用预览，但如果你忽略了它们，你的截图可能不会出现在用户看得到的地方。

什么时候应该包含截图

当你的 PWA 针对以下任一分发上下文时，添加截图：

• Android 应用商店（Google Play、其他 Android 商店）
• 桌面商店（Microsoft Store、Mac App Store）
• 浏览器商店（Chrome Web Store、Microsoft Edge 加载项）
• **渲染应用预览画廊的市场列表`

如果你只通过 PWA 原点直接网站 URL 分发安装，截图成员不会被渲染——你的安装提示会依赖 PWA 标题、描述和图标。

截图质量评价标准

用这个检查列表交付能帮用户明智安装的截图：

• [ ] 多个捕获：3-6 张显示不同功能或流程的截图，不要重复相同 UI。
• [ ] 设备 specificity：移动捕获用 form_factor: "narrow"，桌面/平板用 "wide"，让分发平台显示正确预览。
• [ ] 平台定向：截图为特定 OS 视觉风格优化时添加 platform 值（android、windows、ios、ipados）。
• [ ] 辅助功能标签：每张截图都包含带描述性 alt 文本的 label；平台渲染预览和屏幕阅读器会使用它。
• [ ] 分辨率匹配：提供匹配捕获的 sizes（例如，1920x1080 桌面、750x1334 移动），让商店无伪影渲染。
• [ ] 格式选择：使用 WebP 或 PNG 保证质量；避免在含文本的 UI 截图上使用 JPEG 压缩。
• [ ] 上下文真实：显示真实数据、逼真的流程和代表性功能——不要展示空状态或用占位符填充内容。
• [ ] 命名一致：保持 src 路径可预测（screenshots/feature-name.device.type），让 manifest 可维护。

对安装转化意味着什么

截图是信任信号。当用户在应用商店预览中滚动浏览，看到他们设备上 PWA 界面的真实、标记好的捕获时，他们在点安装前就知道自己安装的是什么。没有截图的列表，或模糊、标记错误、低分辨率图像，看起来像未测试或未完成。

从市场评审角度看，没有截图、只有一张截图或没有平台或设备区分的 PWA 列表意味着安装前评价不完整。截图成员存在，但安装前预览不可用。

Form factor 和平台定向

为服务多个平台使用组合覆盖方法：

| 平台 | 表单因子 | 需要的截图 | |----------|-------------|-------------------| | Android | narrow | 3-6 张移动捕获 | | Android | wide | 2-4 张平板捕获 | | Windows | wide | 3-6 张桌面捕获 | | iOS | narrow | 2-4 张 iPhone 捕获 | | iPadOS | wide | 2-4 张 iPad 捕获 |

平台可能不会显示你提供的所有截图。MDN 中的 App Store 示例显示了窄屏上的水平可滚动画廊和宽屏上的全屏缩放。

要避免什么

不要在所有平台重用同一张通用截图，不要省略 label（辅助功能平台将其用作 alt 文本），不要在 PWA 列出在按 OS 过滤的商店时跳过平台定向。一刀切的截图看起来像懒惰，不是优化。

下一步

阅读 MDN screenshots 参考，了解 form_factor 和 platform 值。不要在没有至少一个商店预览表面测试的情况下发布截图。