PWA Manifest 构建器
开发
PWA manifest 告诉浏览器和操作系统如何安装和呈现你的 web app：启动图标、闪屏颜色、全屏 vs 浏览器 chrome、支持的方向、深链 scope。这个构建器生成符合规范的 `manifest.json`，包含你实际需要的字段，包括合理的默认图标集（192px 和 512px，带 Android 安全区域的 maskable 变体）。输出还包括 `<link rel="manifest">` 加上 Apple 特定的 `apple-mobile-web-app-*` meta 标签，因为 Apple 仍未实现完整的 manifest 支持，跨平台可安装性需要两者。一切可编辑；JSON 在你键入时重新生成。
—
图标
manifest.json
{
"name": "My App",
"short_name": "MyApp",
"description": "A progressive web app",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#0ea5e9",
"background_color": "#ffffff",
"lang": "en",
"categories": [
"productivity",
"utilities"
],
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}HTML head (link + Apple meta)
<link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#0ea5e9" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-title" content="MyApp" /> <link rel="apple-touch-icon" href="/icons/icon-180.png" />
用 `Content-Type: application/manifest+json` 提供 manifest.json。Lighthouse PWA 审计会标记缺失字段。
使用方法
- 设置 name + short_name（short_name 显示在主屏 — 保持 12 字符以下）。设置 start_url 为应用启动时打开的位置。
- 选 display 模式：`standalone`（无浏览器 UI，推荐）最常用。`fullscreen` 隐藏状态栏；`minimal-ui` 保留薄浏览器 shell。
- 添加图标。默认覆盖 Android（192/512）、自适应图标的 maskable 变体。把 JSON 复制到 `manifest.json`，HTML 复制到你的 `<head>`。
常见问题
- 什么是 maskable 图标?
- Android 自适应图标将你的图标裁剪为系统定义的形状（圆、squircle、圆角方）。`purpose: maskable` 图标在 logo 周围包含安全区域 padding，所以裁剪不会切掉边缘。在 192/512 生成 logo 周围 ~20% padding 的 maskable 变体。
- 我需要 manifest.json 和 Apple meta 标签两者吗?
- 如果你想在 iOS 上 install-to-home-screen，是的。Apple 有部分 manifest 支持（theme_color、通过 `apple-touch-icon` 的图标）但忽略大多数。`apple-mobile-web-app-capable` meta 是实际让 iOS 把你站点视为独立应用的东西。