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。

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

CentOS 7.2下安装Mono 5.0

微软Build2017大会期间.NET领域的.NET core之外,就是Visual Studio For Mac,大家都知道Visual Studio For...

1865
来自专栏张善友的专栏

CentOS 7.2下安装Mono 5.0

Mono 5.0是一个非常重要的里程碑版本,支持Windows 64位部署,还有支持PowerPC等,Mono 5.0 和微软的.NET 的可操作性,兼容性也得...

6550
来自专栏小程序解决方案的专栏

基于 Wafer 2.0 搭建自己的第一个小程序

临近 2017 年末尾了,距离微信小程序上线也已经一年多了,随着微信在上半年放开了个人申请微信小程序的限制,越来越多的开发者选择开发微信小程序而不是开发一个 A...

14.7K6
来自专栏Java社区

【免费福利】PHP从基础语法到原生项目开发教程视频

1953
来自专栏知晓程序

开发 | 第一次打开小程序,用户拒绝登录授权怎么办?

现在,有不少小程序都加入了「微信登录」功能,它可以便于用户直接使用微信帐户登录小程序,免去了用户需要额外注册、登录的麻烦。

621
来自专栏信安之路

从长亭的wiki上获取我想要的数据

通常有自己博客的朋友都可以算作是喜欢分享,技术能力是次要的,只要爱分享就是我们所寻找的有缘人。

750
来自专栏编程微刊

微信小程序常见的UI框架/组件库总结

2733
来自专栏非著名程序员

Bug 看你往哪里逃?我会让你无所遁形

编程中的 Bug ,Error 等各种报错是不可避免的,如果有一个好的 logcat 工具绝对可以帮助大家快速的定位到错误,并高效的找到解决办法。

1046
来自专栏FreeBuf

搭建Redis;Minerd安全应急演练环境

近期公司需要进行一次安全运维应急演练,需要部署一套应急演练环境。想到几个月前公司的一台服务器的redis未认证授权漏洞导致被人放了挖矿程序,于是决定部署redi...

1926
来自专栏七夜安全博客

细说IPProxys

1363

扫码关注云+社区