HTML制作应用截图与商店截图完整指南

本文全面解析了为PWA应用制作合规商店截图的关键技术要点，涵盖manifest.json中screenshots字段的正确配置（必须为HTTPS绝对路径、.webp格式、严格匹配平台尺寸如1080×1920）、跨域与托管要求（需支持CORS的HTTPS服务器）、设备模拟精准截图方法（Chrome DevTools自定义设备参数、Puppeteer自动化截长图）、以及常被忽视的缓存陷阱与manifest更新机制——从开发到上线，帮你避开Google Play和Microsoft Store审核失败的每一个坑。

manifest.json 里 screenshots 字段必须是 HTTPS 绝对路径

应用商店（Google Play、Microsoft Store、PWA 安装提示）读取 screenshots 列表时，只接受可公开访问的 HTTPS URL。本地路径（./screens/1.png）、相对路径（screens/2.jpg）或 HTTP 链接都会被忽略甚至导致验证失败。

• 所有截图必须托管在支持 CORS 的 HTTPS 服务器上（GitHub Pages、Vercel、Cloudflare Pages 均可）
• 路径需完整，例如 "https://example.com/assets/screenshot-home.webp"，不能省略协议和域名
• 建议统一用 .webp 格式：体积小、兼容性好（Chrome/Firefox/Edge/Safari 16.4+ 均支持）
• 微软商店额外要求至少一张 1280×720，Google Play 推荐 1080×1920（竖屏）和 1920×1080（横屏）

Web App Manifest 中 screenshots 数组写法与校验要点

screenshots 是 manifest.json 的顶层字段，类型为字符串数组，不是对象，也不嵌套在 display_override 或 icons 下。常见错误是把它错放在 short_name 同级但拼写成 screenshot（少 s）或 screen_shots（下划线）。

• 正确写法：

  {
    "name": "My App",
    "short_name": "App",
    "screenshots": [
      "https://example.com/screens/1.webp",
      "https://example.com/screens/2.webp"
    ]
  }

• Chrome DevTools 的 Application → Manifest 面板不会显示 screenshots，得靠 Lighthouse 或商店上传工具校验
• Lighthouse 9.x+ 在 PWA 审计中会检查该字段是否存在且 URL 可访问；若返回 404 或跨域拒绝，会标为「未通过」
• 图片宽高比必须符合平台要求，否则 Google Play 控制台上传时提示 "Screenshot dimensions do not meet requirements"

生成合规截图时浏览器 viewport 和设备模拟的关键参数

直接用桌面浏览器 F12 截图大概率不达标——应用商店要求截图反映真实安装后全屏运行状态，需匹配目标设备的 DPR、安全区、状态栏高度。

• Chrome DevTools → ⚙️ Settings → Devices → 添加自定义设备，推荐配置：
  – iPhone 14 Pro：393×852，DPR=3，user agent 包含 iOS
  – Pixel 7：1080×2340，DPR=2.8，user agent 包含 Android
• 截图前务必关闭地址栏、底部导航栏（启用 display: standalone 或 display: minimal-ui）
• 避免手动拖拽缩放，用 document.documentElement.style.zoom = '1' 重置缩放，再执行 window.scrollTo(0, 0)
• 截长图时用 Puppeteer 更可靠：page.screenshot({ fullPage: true, type: 'webp', quality: 90 })，注意设置 viewport 与目标设备一致

PWA 安装后截图不更新？缓存与 manifest 更新机制

用户已安装 PWA，但你更新了 screenshots 数组，新截图却没出现在系统分享菜单或商店页面——这不是 bug，是 manifest 缓存策略生效了。

• manifest.json 本身无 Cache-Control 头时，浏览器可能长期缓存（尤其 Service Worker 控制下）
• 必须同时更新 manifest 文件内容（哪怕只加个空格）并确保响应头包含 Cache-Control: no-cache 或 max-age=0
• Service Worker 中若用 cache.match(manifestUrl)，需在 install 事件里跳过缓存，或在 fetch 事件中对 manifest 请求添加 cache-busting 参数（如 ?v=2）
• 用户端刷新无法触发 manifest 重载，需卸载重装，或等待浏览器自动轮询（最长 24 小时）

实际部署时最容易被忽略的是截图尺寸的像素级精度——比如 Google Play 要求竖屏截图严格为 1080×1920，差 1px 就报错，且不提示具体哪张图有问题。建议用脚本批量校验：identify -format "%w x %h %m" *.webp（ImageMagick）。

到这里，我们也就讲完了《HTML制作应用截图与商店截图完整指南》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！