Web App Manifest

Web App Manifest 是什么？

提供更快、更类似 Nactive App 的体验

• 有唯一的图标与其他站点区分

• 控制从主屏幕启动的内容，避免生硬的过度

打开页面的方式

• 浏览器书签、收藏

• 浏览器地址栏输入网址

• 搜索引擎

调试

手机调试时要先打开应用安装的权限，设置代理查看本地站点。

代码示例及属性解释

{
  "name": "Main丶侯的博客", // 应用名称，用于安装横幅提示的名称，启动页面的文字
  "short_name": "博客", // 应用的短名称，手机主屏幕显示的名称
  "display": "standalone", // 显示类型，显示画面的类型
  "start_url": "/", // 添加页面用于来源统计，如果为空则默认打开当前页面为首屏
  "icons": [{
    "src":"/logo_96.png",
    "sizes": "96x96",
    "type": "image/png"
  },{
    "src":"/logo_144.png",
    "sizes": "144x144",
    "type": "image/png"
  },{
    "src":"/logo_192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],                        // 桌面的图标
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

display 有三个可选值：

• fullscreen：应用占满整个屏幕

• standalone：浏览器相关 UI（导航栏、工具栏等）将被隐藏

• minimal-ui：与 standalone 类似，不同的浏览器略有差别

通常设置一组 icons ，浏览器会根据设置的字段来进行选择，对于桌面图片会自动调整到 48dp 的图片，而启动界面上的图标会调整到 128dp 的图片。如果修改 manifest 的图标列表，需用户重新添加到页面时更新（未来的 chome 将支持自动更新）

添加到主屏的条件

• 部署 manifest.json 且正确配置属性

• 成功注册 Service Worker

• 支持 HTTPS 访问

• 页面可以离线访问

添加到主屏的方式

• 手动添加到主屏

• 应用安装横幅引导添加

网站显示应用安装横幅的条件

• 部署 manifest.json 且正确配置属性

• 成功注册 Service Worker

• 支持 HTTPS 访问

• 用户在同一浏览器至少访问两次，两次间隔 5 分钟

safari 暂不支持

Web App Manifest 支持度

截止 2018-12-31 仍处于草案，safarfi 刚刚开始支持，chome 的支持度最好（但也不支持全部功能）。