无需登录 数据私有 本地保存

Web App Manifest 生成向导 - 填写信息生成清单

PWA 生成器 Manifest PWA 向导 生成
20
0
0
0
已复制到剪贴板

Web App Manifest 生成向导

填写信息，实时生成 PWA manifest.json 清单文件

基本信息
用户看到的完整应用名称
主屏幕图标下方显示的名称（建议≤12字符）
显示与主题
浏览器的工具栏/状态栏颜色
应用启动时的背景颜色
导航设置
应用启动时加载的路径（通常为 /）
应用可导航的URL范围
应用图标 0

至少需要一个 192x192 和 512x512 的 PNG 图标。maskable 图标支持自适应形状。

快捷方式 (Shortcuts) 0

在应用图标上长按或右键时显示的快捷操作菜单。

高级设置

应用商店分类标签
manifest.json 预览 
{
  "name": "",
  "start_url": "/",
  "display": "standalone"
}
请填写应用名称并添加图标

常见问题与知识点

Web App Manifest 是一个 JSON 格式的清单文件，它告诉浏览器你的 web 应用如何安装在用户设备上。通过 manifest.json，你可以定义应用名称、图标、启动画面颜色、显示模式等。它是 PWA（渐进式 Web 应用）的核心配置文件，没有它，你的 web 应用就无法以类似原生应用的方式安装到用户的主屏幕上。主流浏览器（Chrome、Edge、Firefox、Safari）均已支持。

通常放在网站根目录下（如 /manifest.json），然后在 HTML 的 <head> 中通过 <link rel="manifest" href="/manifest.json"> 引用。也可以放在子目录中，但需要注意 scope 和 start_url 的相对路径关系。确保服务器返回正确的 Content-Type: application/manifest+json 头。

  • standalone（推荐）：以独立窗口运行，隐藏浏览器地址栏和导航按钮，看起来像原生应用。
  • fullscreen：完全全屏，隐藏所有浏览器UI和系统状态栏。
  • minimal-ui：保留最小的浏览器控件（后退、前进、刷新按钮）。
  • browser：在普通浏览器标签页中打开，和普通网页无异。
大多数PWA使用 standalone 模式以获得最佳的原生应用体验。

theme_color 定义浏览器工具栏、状态栏和任务切换器中显示的主题颜色，用于增强品牌识别。background_color 定义应用启动瞬间（在CSS和JS加载之前）显示的背景颜色，用于减少白屏闪烁感。两者配合使用可以打造流畅的启动体验。建议 background_color 与你的应用主背景色一致。

不同设备和场景需要不同尺寸的图标（如桌面快捷方式、任务切换器、启动画面等）。至少提供 192x192 和 512x512 两个尺寸的 PNG 图标才能满足 PWA 安装条件。

maskable 图标是一种特殊图标，系统可以将其裁剪成不同形状（圆形、圆角方形等）以适应不同平台的图标风格。将 purpose 设为 maskable 可以让你的图标在 Android 等平台上更好地融入系统。推荐同时提供 any 和 maskable 两种 purpose 的图标。

快捷方式允许用户在桌面或主屏幕上长按应用图标（移动端）或右键点击（桌面端）时，弹出快速操作菜单。例如：发送消息、查看通知、搜索等。每个快捷方式需要指定 name 和 url，可以附带独立的图标。这是提升用户体验和功能可达性的好方法。

可以使用以下方法验证：
1. Chrome DevTools → Application → Manifest 面板，会显示解析结果和错误提示。
2. 使用 Lighthouse 进行 PWA 审计，会检查 manifest 的完整性。
3. 在线验证工具如 manifest-validator.appspot.com。
4. 确保 JSON 格式正确（无多余逗号、引号匹配），可使用 JSON 验证器检查。

要让浏览器提示用户安装 PWA，通常需要满足：
1. 有效的 manifest.json（包含 name、icons、start_url、display）。
2. 至少一个 192x192 和一个 512x512 的 PNG 图标。
3. 注册 Service Worker 并实现离线缓存。
4. 网站通过 HTTPS 提供服务（localhost 除外）。
5. 用户对网站有一定的访问频率和互动（Chrome 的安装启发式规则）。
🔧 相关工具