什么是 manifest.json？
一份关于 web application manifest 以及它如何驱动渐进式 Web 应用的简明指南。
理解 manifest
web application manifest 在 W3C Web Application Manifest 规范中定义，是一个提供 Web 应用信息的 JSON 文本文件。
web application manifest 最常见的用途，是提供浏览器在设备上安装渐进式 Web 应用（PWA）所需的信息，例如应用的名称和图标。
web application manifest 包含单个 JSON 对象，其顶层键被称为 members。
为什么 manifest.json 很重要
| 好处 | 它的作用 |
|---|---|
| PWA 安装 | manifest 让浏览器可以提示用户将你的 Web 应用安装到设备上，使其感觉像原生应用。 |
| 图标引用 | manifest 告诉浏览器在不同场景下使用哪些图标文件：主屏幕、启动画面和应用启动器。 |
| 应用元数据 | 它提供关键信息，例如应用名称、主题色、显示模式和起始 URL，以带来一致的体验。 |
图标的挑战
创建一个完整的 manifest.json 需要生成并引用多种尺寸的图标。每种尺寸在不同平台和场景下都有特定用途。
每种尺寸的用途
| 尺寸 | 用途 |
|---|---|
| 192x192 | 标准 Android 主屏幕图标 |
| 512x512 | 高分辨率启动画面和 Android |
| 96x96 | 桌面快捷方式和 Google TV |
| 32x32 | 浏览器标签页和书签 |
| 16x16 | 地址栏和较旧浏览器的支持 |
同样的尺寸，真实比例
Favicon Tools 如何帮上忙
手动创建所有必需的图标尺寸并维护一个 manifest.json 文件既费时又容易出错。Favicon Tools 会自动完成这个过程。
当你用 Favicon Tools 生成 favicon 时，我们会自动写出一个完整的 manifest.json，引用你需要的所有图标尺寸：
生成的 manifest 覆盖了什么
| 图标组 | 尺寸 | 覆盖内容 |
|---|---|---|
| Android 图标 | 192x192, 512x512 | 主屏幕快捷方式和启动画面 |
| 标准 favicon | 16x16, 32x32, 96x96 | 浏览器标签页和书签 |
| Apple touch icons | 所有必需的尺寸 | iOS 设备 |
| Windows 磁贴 | 磁贴尺寸 | 与 Microsoft 开始菜单集成 |
manifest.json 示例
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}这个 manifest 包含 PWA 安装以及在不同平台正确显示所需的所有关键图标引用。Favicon Tools 会连同所有被引用的图标文件一起自动生成它。
一键生成
上传一次源图，Favicon Tools 就会生成你需要的每一种图标尺寸，外加一个完整的 manifest.json 文件，全部打包成一个可下载的文件包。
无需手动调整图片大小、创建多个文件或手写 JSON。一切都已就绪，可直接放入你的项目。
始终保持最新
当你在品牌重塑或设计更新后重新生成 favicon 时，manifest.json 会随之更新为正确的图标引用。
这能防止你的 manifest 与实际图标文件失去同步，而失去同步正是产生损坏引用和图标缺失的原因。