Manifest添加至桌面教学

pwa资料整理（一）：manifest 添加至桌面

pwa资料整理（一）：manifest 添加至桌面

（没时间解释了，先学了再说）
pwa 本身不是一套技术栈，而是一个理念，是使用一系列的技术，改进 web 应用在安全、性能、体验等方面的表现，并渐进式的达到原生应用的表现能力。
google 官网针对于 pwa 给出的关键词是：

reliable - load instantly and never show the downasaur, even in uncertain network conditions. fast - respond quickly to user interactions with silky smooth animations and no janky scrolling. engaging - feel like a natural app on the device, with an immersive user experience.

可靠、快速以及良好的使用体验，也即是通过 web application 来提供媲美原生应用的服务。虽然在当前移动端用户已经习惯了将各个独立应用作为入口的环境下，pwa 的理念在未来的发展福祸未卜，不过作为开发者还是先学习了再说，有备无患。
关于 pwa 相关的内容，将划分为三个博客对部分技术要点进行资料整理（搬运 ），分别为：

manifest 添加到桌面（本篇） service worker 离线缓存 service worker 消息推送

manifest

说到这个就想起来之前刚到实验室的时候，姜工提的 web 添加桌面快捷方式的需求。由于 web 应用本身权限比较低，不能自动添加，只能借助所带的功能，因此那个需求也就不了了之。

pwa 提供了 web app manifest 用以将 web application 安装到设备的主屏幕。

manifest 示例

manifest 只需要简单的添加 link 标签就能够完成部署：

这里是一个 manifest.json 的例子，来自 mdn

{
  "name": "hackerweb",
  "short_name": "hackerweb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "a simply readable hacker news app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

其中，display属性用于指定 application 的显示模式，如fullscreen（全屏显示）以及standalone（作为独立 application 显示）等；icon属性指定了不同 size 的图标资源；name、short_name、description等属性都很清晰，不再做介绍，其在 mdn 中有更为详细的介绍。

兼容性

兼容性就是一个令人悲伤的事情了。在 desktop 端，当前没有浏览器对 manifest 进行支持（不过桌面环境本就不是 pwa 的舞台）；在 mobile 端，各大浏览器厂商的支持情况也很惨淡：

feature	android	android webview	firefox mobile (gecko)	ie mobile	opera mobile	safari mobile	chrome for android
basic support	未实现	39.0	?	?	32.0	?	39.0
background_color	未实现	46.0	?	?	(yes)	?	46.0
theme_color	未实现	46.0	?	?	未实现	?	46.0
icons, name, short_name, and theme_color used for add to home screen feature.	?	(yes)	53.0	?	未实现	?	(yes)