Web App Install Banners简介

移动端，web和native app有一个比较大的区别：访问的过程。

以一个“标准”的访问流程为例：

web：用户打开一个第三方程序，比如浏览器、微信。如果是浏览器，则需要用户在地址栏里输入内容，比如：cloud.tencent.com，浏览器中显示这个站点。用户完成访问。当他再次访问的时候，大多数用户仍然需要重复这一过程，当然有经验的用户会使用书签或者利用浏览器的功能保存到一个很丑快捷入口到主屏幕。

app：用户打开一个第三方程序，比如app store，下载，安装到主屏幕，完成，使用。再次访问的时候，只需在主屏幕找到app的图标即可。这个过程是所有用户都如此，就算是第一次使用智能手机的用户也会。

这里就产生一个问题，在移动端潮流中，web的回访性就天然的低于app，因为访问的成本实在是太高了。

好在，google推出了一个技术Progressive Web Apps，他是几个技术的集合。以后慢慢介绍，先介绍一个最常用的：web app install banners。如下图：

要触发一个安装，需要满足下面的条件：

要有一个web app manifest，并且要配置好必须的字段：

• short_name (主屏幕上的名字)
• name (banner上的名字)
• 192x192 png icon (图标的声明必须包含mime类型 image/png)
• start_url 点击图标访问的地址

网站上要注册一个service worker

必须是https

至少访问两次，且两次间隔不小于5分钟

谷歌提供了一个测试工具lighthouse，可以在chrome扩展里面查找并且安装，然后在Devtools中的application中看到。点击Manifest，然后再点击Add to homescreen。