让PWA可安装【翻译】
PWA系列：
在上一篇文章中，我们介绍了如何通过运用service worker让js13kPWA支持离线工作，现在让我们更进一步，使得在支持的移动浏览器上可以安装web应用，就好像在操作一个本地应用一样。这篇文章介绍了如何实现这个功能，通过两个技术：web清单（web manifest）和添加到主屏幕（add to home screen）技术。
这些技术使得我们可以直接从设备的主屏幕上打开app，而不需要再启动浏览器，输入URL等繁琐的操作。这样你的app就可那些本地应用一样，属于一等公民了。这样我们可以更容易的访问应用，同时可以指定让应用全屏运行（不用看chrome浏览器的边框了），这样感觉起来就更像个本地应用了。
需要条件
为了让网站可安装，需要完成下面几件事：
- 一个web清单，正确的参数
- 可以通过HTTPS访问
- 一个在设备上显示用的icon
- 一个注册的service worker，让app离线可用（目前只有Chrome+Android可用）
清单文件
最关键的元素是web清单文件，以JSON形式列出网站的所有信息。
清单通常放在web应用的根文件夹中。包含比如app的标题，不同尺寸的icon（用于移动OS端），用于加载/初始界面的背景色。当web应用安装或者在主屏幕上显示时，会用到这些信息。
<head>中包含了js13kpwa.webmanifest：
<link rel="manifest" href="js13kpwa.webmanifest">
具体的内容：
{
"name": "js13kGames Progressive Web App",
"short_name": "js13kPWA",
"description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
"icons": [
{
"src": "icons/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
// ...
{
"src": "icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/pwa-examples/js13kpwa/index.html",
"display": "fullscreen",
"theme_color": "#B12A34",
"background_color": "#B12A34"
}
大多数的参数都很容易理解，让我们看细看一下：
-
name：web app的全名 -
short_name：在主界面显示的名字 -
description：app的简单描述 -
icons：icon的信息——资源的URL，大小，种类。请确保多添加一个不同尺寸的icon，这样就可以在用户的设备上显示最合适的一个。 -
start_url：启动应用的入口文件 -
display：app怎么显示：全屏，standalone（隐藏浏览器UI），minimal-ui（和standalone类似，不过浏览器会显示一些最基本的导航UI，浏览器不同显示内容可能不同），browser（原始样式）。 -
theme_color：操作系统使用的UI主色调。 -
background_color：背景色，安装和初始屏幕时使用。
最最基本的信息是name和至少一个的icon（包括src，size和type）。推荐添加description，short_name和start_url。除了上述的参数之外，还有其他的一些参数——请查看Web App Manifest reference。
添加到主屏幕（add to home screen）
“添加到主屏幕”（a2hs）特性从应用的清单中获取信息，移动浏览器利用这些信息在设备的主屏幕上添加应用（主要用到的是icon和name信息）。当且仅当你的app满足了上述的条件才可用。
当用户用支持这些特性的移动浏览器访问PWA时，需要提供一个横幅（banner）信息表示此app可以安装为PWA。
enter image description here
当用户点击了横幅，会再显示一个安装横幅。这个横幅由浏览器自动生成，生成的信息基于清单——name和icon信息。
[图片上传失败...(image-3ee3a4-1548861749764)]
在用户点击了按钮之后，最后会显示应用在主屏上的显示效果，并让用户做最后的确认。
enter image description here
当最后确认后，应用会被安装到主屏幕上。
enter image description here
安装成功之后，用户可以从主屏幕上快速启动应用。PWA有时候在创建时会在icon的右下角显示创建的浏览器的来源（取决于你的操作系统和浏览器）。
初始界面
在某些浏览器中，清单也会提供初始界面的信息，用于在PWA启动时显示。
enter image description here
icon，theme和背景色会在这时派上用场。
总结
本章中，我们学习了如何实现PWA的可安装性，主要是通过web清单和添加到主屏幕这两个技术。
想要了解关于添加到主屏幕的更多信息，可以查看Add to Home screen guide。浏览器的支持还相对较弱。
让我们进入最后一个步骤——通过消息推送增加用户粘度（re-engagement）。
