创建并加载 Web 应用清单文件，是将电商网站转化为可安装在移动设备上的渐进式 Web 应用（PWA）的关键第一步。
PWA 通过采用现代 API 与最佳实践，为用户提供媲美原生应用的体验。其核心优势在于支持安装至移动设备主屏幕，即便在 iOS 11.3 及以上版本的 Apple 设备上也能实现。
Web 应用清单文件是迈向 PWA 的第一步，它允许应用在移动设备上像原生应用一样被安装。图片来源：William Hook
对于电商卖家而言，PWA 可将完整产品目录存储于客户手机中，实现一键购物。而这一切的起点，正是创建一个标准的 Web 应用清单文件。
必需成员
Web 应用清单文件基于 JSON 格式，由键值对组成。规范定义了 18 个属性（成员），用于控制 PWA 在移动端的显示与加载方式。通常情况下，只需配置以下五个核心成员：name、short_name、icons、start_url 和 display。
name：PWA 的全称，通常显示在主屏幕图标下方或系统其他位置。它可以与业务名称一致，也可以独立命名。例如，厨具店“Maggie Mae’s Pots and Pans”的应用名可设为“Pot and Pan Finder”。建议保持简短。
{ "name": "Pot and Pan Finder" }
short_name：当 name 过长时的备用短名称，同样显示在图标下方。建议控制在 10-20 个字符以内，例如“Pan Finder”。
{ "name": "Pot and Pan Finder", "short_name": "Pan Finder" }
icons：一个对象数组，包含应用在不同设备上的图标信息。主流平台要求如下：
- iPhone：120×120px、180×180px
- iPad / iPad Mini：152×152px
- iPad Pro：167×167px
- Chrome (iOS/Android)：192×192px、512×512px
每个图标对象需包含三个关键属性：
- src：图标图片路径
- sizes：图片尺寸
- type：图片 MIME 类型
示例代码如下：
"icons": [ { "src": "/imgs/icon192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/imgs/icon512.png", "type": "image/png", "sizes": "512x512" } ]
start_url：定义应用启动时的初始页面路径。虽然规范支持绝对 URL，但 Chrome 浏览器仅接受相对路径，如首页可设为“/”。
{ "start_url": "/" }
display：指定应用的显示模式，共有四种选项：
- fullscreen：全屏显示，无浏览器 UI，注意可能缺少返回按钮
- standalone：类似原生应用，拥有独立窗口，无浏览器导航栏
- minimal-ui：类原生体验，但保留基础浏览器导航功能
- browser：在标准浏览器标签页中打开
完整的基础清单文件示例：
{ "name": "Pot and Pan Finder", "short_name": "Pan Finder", "icons": [...], "start_url": "/", "display": "minimal-ui" }
推荐成员
除上述五项必需成员外，建议补充以下四个属性以提升体验：
- description：应用描述文本
- scope：限定 PWA 的作用域，防止用户通过应用窗口跳转至外部站点。建议使用完整域名或根路径“/”
- background_color：应与着陆页 CSS 背景色一致，用于生成应用启动画面
- theme_color：定义应用主题色，如 Android 任务切换器中的颜色
包含清单文件
完整的清单文件应以 .json 或 .manifest 为扩展名保存，并置于网站根目录下（如 example.com/manifest.json）。随后，在 HTML 文档的 <head> 部分添加以下链接即可：
<link rel="manifest" href="/manifest.json">
浏览器加载页面时会自动识别并读取该清单文件。
参考资料
- W3C Web App Manifest 规范
- Mozilla Developer Network Web App Manifest 文档
- Pete LePage《Add a Web App Manifest》
- Pete LaPage《了解成为可安装应用所需的内容》
- Shruti Kapoor《渐进式 Web 应用入门：是什么、为什么和怎么做》
- Jamie Maria Schouren《渐进式 Web 应用是趋势吗？关于电商 PWA 的全面指南》