2. 配置Web App Manifest

任务说明

本案例为PWA应用配置manifest.json文件，使其具备完整的应用元数据：应用名称、图标组、主题色、背景色、显示模式、起始URL及作用域范围。配置完成后，通过浏览器开发者工具验证manifest是否被正确解析。

实现方案

创建一个标准的Web App Manifest文件，并在HTML页面中通过<link>标签引入。manifest采用JSON格式，包含以下核心字段：

• name / short_name：应用全称与短名称（用于桌面图标下方显示）
• icons：至少包含192px和512px两种尺寸的PNG图标（PWA安装必备）
• theme_color：工具栏与任务切换器的主题色
• background_color：启动画面背景色
• display：设置为standalone，使应用以独立窗口运行
• start_url：应用启动时加载的页面
• scope：限定应用可访问的路径范围

代码实现

项目目录结构如下：

pwa-demo/
├── index.html
├── manifest.json
└── icons/
    ├── icon-192.png
    └── icon-512.png

1. manifest.json（完整配置）：

{
  "name": "任务清单PWA",
  "short_name": "任务清单",
  "description": "一个支持离线使用的任务管理应用",
  "lang": "zh-CN",
  "start_url": "./index.html",
  "scope": "./",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#4A90D9",
  "background_color": "#F5F7FA",
  "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"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

2. index.html（引入manifest）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="manifest" href="#" aria-disabled="true" data-keke-missing-local-link="1" onclick="return false">
  <title>任务清单PWA</title>
</head>
<body>
  <h1>我的任务清单</h1>
  <!-- 页面内容 -->
</body>
</html>

图标生成说明

图标文件需为真实PNG图片。可使用任意图像编辑工具生成192×192和512×512两种尺寸的图标，或使用在线工具（如PWA Image Generator）从一张512px源图自动生成全部尺寸。图标内容建议使用与应用主题色（#4A90D9）一致的纯色背景加白色图形，确保在浅色和深色任务栏中均清晰可见。

验证方法

验证路径：使用Chrome或Edge浏览器打开index.html，按F12打开开发者工具，切换到Application（应用）面板，点击左侧Manifest标签。

判定标准：

1. Manifest面板中能正确显示应用名称“任务清单PWA”、短名称“任务清单”、主题色#4A9D9、背景色#F5F7FA；
2. 显示模式为standalone，起始URL为./index.html，作用域为./；
3. 图标区域列出3个图标项（192px any、512px any、512px maskable），且每项均显示“已安装”或可预览状态，无“错误”提示；
4. 在浏览器地址栏右侧出现“安装”图标（或“应用已可安装”提示），说明manifest配置满足PWA安装条件。

关键配置说明

display: "standalone"使应用隐藏浏览器地址栏，以独立窗口运行；scope: "./"限定应用只能访问当前目录及子目录下的页面，防止越权导航；purpose: "maskable"的图标用于适配Android自适应图标，确保图标在圆形/圆角遮罩下完整显示。以上配置共同构成PWA可安装性的基础条件。