Web App Manifest 怎么写？PWA 图标、名称、主题色和安装体验指南

Web App Manifest 是一个 JSON 文件，用来告诉浏览器你的网站作为“应用”安装时应该叫什么、用什么图标、启动颜色是什么。

你可以用 Web App Manifest 生成器 生成基础 manifest。

常见字段

常见字段包括：

• name：完整名称。
• short_name：短名称。
• start_url：启动地址。
• display：显示模式。
• theme_color：主题色。
• background_color：启动背景色。
• icons：应用图标。

字段要和真实网站一致，不要随便复制模板。

图标尺寸要准备好

Manifest 通常需要多个尺寸图标，例如 192x192、512x512。图标不清晰会影响添加到主屏幕后的体验。

如果还没准备图标，可以先用 Favicon 生成工具 生成基础尺寸。

PWA 不是只有 manifest

Manifest 只是 PWA 的一部分。完整离线体验、缓存策略、推送等还需要 Service Worker 和 HTTPS。

但即使不做完整 PWA，manifest 仍然能改善移动端安装和图标展示。

名称和启动地址要谨慎

short_name 会出现在主屏幕图标下方，太长会被截断，太短又不容易识别。建议先在手机上模拟添加到主屏幕，看名称是否清楚。start_url 也要明确，通常应该落到首页或工具入口，而不是带有临时参数的活动页。

display 会影响打开后的浏览器外观。standalone 更像应用，但如果网站依赖浏览器地址栏、返回路径或外部跳转，就要实际测试导航体验。主题色和背景色应和首屏视觉一致，避免启动时闪一下完全不同的颜色。

验证 manifest 是否生效

部署后可以在浏览器开发者工具的 Application 面板查看 Manifest。重点检查图标是否加载成功、尺寸是否满足要求、是否有 404、是否有跨域问题。还要确认 HTML 里正确引用了 manifest 文件。

总结

Web App Manifest 影响网站被添加到桌面或主屏幕时的表现。名称、图标、颜色、启动地址都要认真填写。

需要生成文件时，可以用 Web App Manifest 生成器，再部署为 /manifest.webmanifest 或项目约定路径。