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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Go 语言社区】[Golang]优秀开源库剖析

原创文章,转载请注明出处:服务器非业余研究http://blog.csdn.net/erlib 作者Sunface 1.blelve 地址:h...

43280
来自专栏玄魂工作室

CTF实战2 Web应用构成

https://www.bilibili.com/video/av22207039/

12120
来自专栏Python中文社区

一个多线程知乎用户爬虫的实现

專 欄 ❈默然,Python中文社区专栏作者。 博客:https://www.zhihu.com/people/moranzcw GitHub:https:/...

29050
来自专栏知晓程序

开发 | 效率提升 100%,小程序开发应该这样做

16930
来自专栏全华班

敏捷工作流开发平台(学习参考)

资源管理(用于服务器鉴权,用户分配资源菜单)、数据字典、定时计划(定时调度引擎)、系统属性(多环境系统参数定义)、系统数据源(系统支持多数据源的数据获取,系统数...

25910
来自专栏分布式系统进阶

利用Mesos构建多任务调度系统

49150
来自专栏Python中文社区

构建一个pip安装的车辆路径显示的Python包

專 欄 ❈treelake,Python中文社区专栏作者。 简书: http://www.jianshu.com/u/66f24f2c0f36 ❈ 最近有一些...

271100
来自专栏机器学习算法工程师

Windows下安装Scikit-Learn

0. 引言 自从机器学习大火起来以后,做机器学习最热门的语言应该说是非Python莫属,原因大致有以下几个方面:1. Python语言简单易学,语法简单灵活;2...

39660
来自专栏张伟博客

百度分享工具不支持htts的解决方法

13170
来自专栏张戈的专栏

BaiduSubmit:度娘WordPress结构化数据插件(改进版)

张戈博客曾多次提到一个会造成百度不收录问题的原因:如果网站存在实时推送机制(比如安装了百度官方推出的 BaiduSubmit 插件),那么发布文章后,在百度收录...

36850

扫码关注云+社区

领取腾讯云代金券