由于 Web 应用入口严重依赖于浏览器,这一限制大大降低了用户体验且不利于用户留存。即使部分浏览器提供了添加为桌面快捷方式的机制以便用户快速打开应用,但其表现形式依旧含有强烈的浏览器标签。而 PWA 正是通过 Manifest 配置文件在保留 Web 应用原有特性的同时,降低甚至抹平与原生应用间的差异,从而提高用户体验及用户留存率。
接下来,我们通过一个具体的例子来对其进行深入讲解。
# manifest.json 配置
{
"name": "PWA Manifest Demo",
"short_name": "Manifest Demo",
"start_url": "./index.html",
"theme_color": "#4374A5",
"background_color": "#4374A5",
"display": "standalone",
"orientation": "natural",
"icons": [{
"src": "images/launcher-icon.png",
"sizes": "192x192",
"type": "image/png"
}]
}
@前端进阶之旅: 代码已经复制到剪贴板
# 应用名称
name:应用名称,使用场景为:
启动页

安装提示

short_name:应用短名称,使用场景为:
主屏幕

安装横幅

注:在 Google web app manifest 中提到安装横幅使用 name,但实际测试结果使用的是 short_name,故此处根据实际测试结果进行说明。
# 启动网址
start_url:启动应用时加载的 URL。
# 主题色
theme_color:工具栏的色值,如在HTML中通过meta标签指定,则以meta标签指定的色值为准,故建议meta与manifest.json的值保持一致。
