Web App Manifest 图标预览 - 模拟主屏图标效果

Web App Manifest 是一个 JSON 文件（通常命名为 manifest.json），它为 PWA（渐进式 Web 应用）提供元数据。通过它，浏览器可以在用户将网站添加到主屏幕时，使用指定的图标、名称、主题色等信息，让 Web 应用看起来像原生应用。没有 Manifest，添加到主屏幕只会显示一个简陋的截图或默认图标。

Android Chrome：至少 192×192 和 512×512（推荐同时提供 maskable 版本）。
iOS Safari：推荐 180×180（iPhone）、167×167（iPad Pro）、152×152（iPad）。iOS 使用 apple-touch-icon 而非 manifest 中的 icons。
Windows/Mac PWA：通常使用 192×192 或 512×512。
最佳实践：提供 48、72、96、144、192、512 共 6 个尺寸，覆盖所有主流平台。

Maskable Icon 是 Android 平台引入的自适应图标格式。不同于固定形状的图标，Maskable Icon 可以被启动器裁剪成圆形、圆角方形、Squircle 甚至水滴形。图标中心约 80% 的区域为 Safe Zone（安全区域），保证在任何形状下都可见。设计图标时应将核心内容（如 Logo）放在 Safe Zone 内，边缘 10% 可能被裁剪。在 manifest.json 中通过 "purpose": "maskable" 声明。

iOS：自动为图标添加圆角（约 22.5% 圆角半径），开发者上传正方形图标即可，无需手动裁剪。iOS 使用 <link rel="apple-touch-icon"> 标签而非 manifest.json 中的 icons 数组。
Android：使用 Maskable Icon 机制，启动器会根据其主题将图标裁剪为不同形状（圆形、方形等）。需要通过 "purpose": "maskable" 声明，并确保 Safe Zone 内有完整内容。

theme_color：影响浏览器工具栏、状态栏的颜色（在 Android Chrome 上尤为明显），营造沉浸式体验。应与品牌主色一致。
background_color：应用启动时瞬间显示的背景色（在图标和内容加载之前），应尽量接近应用的初始背景色，避免白屏闪烁。
两者配合使用可大幅提升 PWA 的启动体验。

standalone（推荐）：像原生应用一样，隐藏浏览器地址栏和导航按钮，拥有独立窗口。适合大多数 PWA。
fullscreen：完全全屏，甚至隐藏状态栏。适合游戏或沉浸式媒体应用。
minimal-ui：保留最小浏览器 UI（返回、刷新按钮）。适合需要浏览器基础功能的应用。
browser：在浏览器中正常打开，无特殊处理。不推荐用于 PWA。

1. 使用 Chrome DevTools → Application → Manifest 面板查看解析结果。
2. 使用 Lighthouse（Chrome 内置）进行 PWA 审计。
3. 在 Android Chrome 中打开网站，检查"添加到主屏幕"提示是否出现。
4. 使用本工具模拟预览，确保图标在不同形状下都有良好表现。
5. 验证 JSON 格式是否正确（推荐使用 JSONLint）。