Web App Manifest 是什么？它包含哪些主要属性和配置？

Web App Manifest 是一个 JSON 文件，用于定义 PWA 的元数据和安装信息。它让 Web 应用能够像原生应用一样安装到设备上。

Manifest 文件的基本结构

json
{
  "name": "我的 PWA 应用",
  "short_name": "MyPWA",
  "description": "这是一个 PWA 应用示例",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Manifest 的主要属性

1. 应用名称

• name：完整的应用名称
• short_name：简短的应用名称（用于主屏幕图标下方）

2. 启动配置

• start_url：应用启动时的 URL
• scope：应用的作用域范围
• orientation：屏幕方向（portrait、landscape 等）

3. 显示模式

• display：定义应用的显示方式
  • fullscreen：全屏显示
  • standalone：独立应用模式（推荐）
  • minimal-ui：最小化 UI
  • browser：浏览器模式

4. 视觉配置

• background_color：启动页背景色
• theme_color：应用主题色（影响浏览器 UI）
• icons：应用图标数组

5. 其他属性

• description：应用描述
• dir：文本方向（ltr、rtl）
• lang：应用语言
• categories：应用类别数组
• screenshots：应用截图数组

图标要求

图标尺寸

• 192x192：用于 Android 设备
• 512x512：用于 iOS 设备和某些 Android 设备
• 推荐提供多种尺寸以适应不同设备

图标格式

• 支持 PNG、WebP、ICO 等格式
• 推荐使用 PNG 格式以获得最佳兼容性

图标用途

• purpose 属性可以指定图标用途：
  • any：通用图标
  • maskable：可遮罩图标（适应不同形状）
  • monochrome：单色图标

Manifest 的引用

在 HTML 中引用 Manifest：

html
<link rel="manifest" href="/manifest.json">

Manifest 的作用

1. 安装提示：浏览器检测到 Manifest 后会显示安装提示
2. 主屏幕图标：定义应用在主屏幕上显示的图标和名称
3. 启动画面：定义启动页的背景色和图标
4. 显示模式：控制应用的显示方式（全屏、独立等）
5. 主题色：影响浏览器地址栏和状态栏的颜色
6. 应用元数据：提供应用的名称、描述等信息

最佳实践

1. 提供完整信息：填写所有必要的属性
2. 优化图标：提供多种尺寸和用途的图标
3. 设置主题色：使用品牌色作为主题色
4. 配置显示模式：根据应用类型选择合适的显示模式
5. 测试安装：在不同设备上测试安装体验
6. SEO 优化：添加 description 和 categories 属性
7. 版本控制：为 Manifest 添加版本号便于更新

浏览器兼容性

• Chrome、Edge、Firefox：完全支持
• Safari：部分支持（iOS 11.3+）
• 需要配合 HTTPS 使用

调试和验证

使用 Chrome DevTools 验证 Manifest：

1. 打开 Application 面板
2. 查看 Manifest 标签
3. 检查是否有错误或警告
4. 测试"Add to home screen"功能