什么是Manifest.json 生成器？
Manifest.json 生成器帮助您为渐进式 Web 应用（PWA）创建完整的 Web 应用清单文件。只需填写应用信息，即可获得格式规范、包含所有必填和可选字段的 manifest.json。
可以配置 name、short_name、description、start_url、scope、display 模式(standalone、fullscreen、minimal-ui、browser)、orientation、主题色、背景色,以及任意数量的图标条目(含尺寸、类型、purpose)。生成的内容符合 W3C Web App Manifest 规范,Chrome、Edge、Safari 在「添加到主屏幕」时都能识别。
使用方法
- 输入应用的基本信息：名称、短名称、描述、主题色和背景色。
- 配置显示模式（独立窗口、全屏、精简 UI）、屏幕方向、启动 URL 和作用域。
- 添加图标条目并指定尺寸，然后复制或下载生成的 manifest.json 文件到您的项目中。
何时使用
- 给已有网页项目加上「安装应用」能力,让它出现在系统应用列表里。
- 为内部员工用的 PWA 自定义启动画面颜色和图标。
- 为没自带 manifest 的 Next.js 或 Vite 模板补一份基础清单。
结果
您正在将菜谱网站转换为 PWA。将名称设为“我的食谱”，主题色设为品牌绿色，显示模式选择“独立窗口”，然后生成清单文件放到项目根目录即可。
常见问题
- standalone 和 minimal-ui 两种显示模式有什么区别?
- standalone 把浏览器导航栏全部隐藏,看起来像原生应用。minimal-ui 会保留顶部一小排导航控件(通常是返回和刷新)。fullscreen 连状态栏都去掉,适合游戏。
- 到底需要哪些尺寸的图标?
- 最少要提供 192×192 和 512×512 两张 PNG,Chrome 和 Edge 会拿去做主屏图标和启动画面。再加 144×144 兼容老版本 Windows 磁贴,再做一张 512×512 且 `purpose: maskable` 的版本,Android 才能在裁剪时不丢细节。
- 为什么 name 和 short_name 都得填?
- `name` 会在安装提示和应用抽屉里显示;`short_name` 出现在主屏图标下方,那里只有大约 12 个字符的空间。不填 short_name,大多数手机会把 name 直接截断,看着很难看。
- manifest.json 文件该放在哪里?
- 把文件命名为 `manifest.json`(或 `manifest.webmanifest`)放在站点根目录,然后在 `<head>` 里加 `<link rel='manifest' href='/manifest.json'>`。浏览器首次加载页面时会自动取它。
- 只放一个 manifest,网站就能被安装了吗?
- 不行。浏览器还要求有一个处理 `fetch` 事件的 Service Worker、必须用 HTTPS,以及至少一张 192×192 图标。manifest 是元数据,Service Worker 才证明网站能离线运行。