manifest.json 中 screenshots 字段必须为 https 绝对路径，类型为字符串数组，需托管于支持 cors 的 https 服务器，统一用 .webp 格式，尺寸须符合平台要求（如 google play 要求 1080×1920），且需配合正确设备模拟与缓存更新机制。
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（下划线）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法：
{ "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 小时）
identify -format "%w x %h %m" *.webp（ImageMagick）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
