小米直达服务探秘:如何保证移动Web体验?

2017 年 9 月 13 日 前端之巅 张晓楠
小米直达服务是小米推出的 App 混合开发框架,它可以实现秒开,同时可以在浏览器、短信、微信等地方打开。具体介绍见官网:
https://dev.mi.com/console/app/newapp.html

既想像 Web 一样快速开发迭代,又希望它能承载任何服务还让你感觉不到卡顿和延迟,这样的要求在移动互联网时代实现起来真的很难。

移动 Web 的体验差在哪

在他看来,目前移动端的应用服务分发基本上是两个承载形态,分别是 APP 和 Web。PC 时代绝大部分服务都是浏览器承载,在浏览器中打开搜索引擎、从搜索引擎中搜索关键字、然后跳到服务页面,这个过程中间可能还会链接到第三个服务,但是无论如何跳转,整个过程是非常流畅的,中间没有任何断档,不需要安装软件、也不需要跳出。

但是这样的体验放到移动端就不那么容易实现了。

首先,移动端所承载的服务远比 PC 端要复杂得多,比如拍照、定位、蓝牙、传感器,这些功能在网页端没有相应的 API 可供调用,让网页去承载移动端的这些服务,服务势必不完整;

另外一个问题就是卡顿的问题了,移动端 CPU 性能要比 PC 端差,这就会导致计算能力不足,外加移动端有很多复杂的应用、前端写法又过于灵活,加之浏览器背负的历史包袱,导致移动端的 Web 应用很容易造成卡顿、慢、占内存等情况。以既有 APP 又有 H5 的很多应用为例,绝大多数情况下 H5 远远达不到 APP 的体验。

此外还有一个问题,就是网页端没法做留存。今天某个用户看到一个好的服务、或者一个好的网页,如果是 APP 的话很轻松可以把应用保存到桌面图标,但是网页却没有这个技术能力可以实现此功能。

当然或许很多人会说那就用 APP 啦,董红光认为 APP 也有很多问题:想想我们每一个人手机上真正下载、安装的 APP 能有多少?你会轻易下载一个动辄几十兆甚至上百兆的 APP 吗?这几十兆甚至上百兆的 APP 没法像网页一样实现一次性分发,要想使用一个 APP,必须先把这个 APP 完整下载下来。

另外很关键的问题在于, APP 之间很难做跳转,A 应用跳到 B 应用,一般是打开 B 应用的 H5 页面,应用之间的割裂很严重,无法给用户带来顺畅体验;而孤岛问题的另外一个呈现形式,在于无法进行索引服务,在应用间进行搜索目前基本上是无法实现的事情。

小米直达服务:技术催生下的必然而为之

针对以上问题或部分问题,其实多家公司推出了解决方案,比如 Google 的 PWA、Facebook 的 React Native、腾讯的微信小程序,还包括阿里的蚂蚁应用、百度的轻应用,而小米也推出了直达服务。

小米直达服务开发示意图

对于小米直达服务的推出,在小米开发者生态业务负责人李晓璐看来,这是顺应技术趋势所在的必然而为之:PC 时代的应用是软件 + 网页形式;移动互联网上半场是原生应用 +Web 应用形式;移动互联网下半场急需解决原生应用以及 Web 应用的各自短板问题——因此混合框架应运而生。对此小米给其直达服务的定义是:秒开及内容直达。

对此小米比较有信心的地方在于,小米直达服务的核心在于它是一个操作系统,操作系统仍是用户使用手机的第一入口,在入口层贴近用户,用户的体验才会最好。李晓璐透露了一个数据:小米手机上 95% 的应用下载来自小米的应用商店。这说明小米的应用分发已经是绝大部分用户使用小米手机时的习惯。如果说应用商店的下一代有新的服务分发形态,那么操作系统仍然有很大优势去做新的生态的探索和新的生态的培养。

对此董红光也进行了补充:小米希望真正做到类似于当前 PC 浏览器的顺畅体验。具体到直达服务技术本身,就不得不提原生渲染技术了。直达服务实际上是运行在一个由直达服务的核心引擎管理的安卓进程上,使用安卓原生渲染,所以从开放能力、性能、内存、权限控制和管理方面的设计理念等同于原生应用

除了原生渲染引擎之外,小米直达服务也支持在没有原生渲染条件之下,直接渲染到浏览器。在此基础之上,小米提供了封装的大量常用组件,也提供了很多高级语义标签,相当于原生封装,不需要开发者自己单独开发——Native 版本一份、 Web 版本一份。

此外,小米直达服务还提供了一个桥接模式,把很多 API 暴露给前端,在此基础上提供了蓝牙、传感器等系统功能;另外还暴露了很多服务能力,比如账号、推送、支付等等。在此基础之上,提供一套 JS 开发框架,除标签、接口能力逐渐暴露以外,还提供 APP 开发需要的页面生命周期管理、页面之间路由跳转等功能。整个核心写法是模板 + 数据绑定的写法,也是目前前端比较流行的一种写法,所谓的 MVVM 模式,这套框架相当于提供了 MVVM 框架的实现。这一整套东西就是运行时环境,运行时环境之外,因为要支持多个应用一起跑,要有沙盒的管理,保证应用之间数据、运行层面的安全。

小米直达服务运行时架构图

成功的关键在生态

据李晓璐介绍:小米推送目前月活 8.4 亿,也就是说在国内安卓市场上,绝大部分推送都是通过小米的服务进行的,而且有 3/4 体量来自非小米上,比如 iOS 以及其他安卓机型,开发者也达到 1.5 万家左右。小米推送是小米开发者生态的最直接体现,以上数字说明小米已经拥有相对比较成熟的开发者服务。而小米直达服务,势必在开发者侧发力,构建更为成熟的开发者生态。

对于开发者来说,Native 形态遇到的最大瓶颈就是流量成本获取太高,用户从应用商店下载的 APP,激活率只有 60%。而小米直达服务这样的新型应用形态,使得一个应用不需要下载,点了之后就是激活,对开发者来说等于是 100% 激活率。

另外,小米直达服务还兼容了 H5 形态,传统 H5 可以跳转到直达服务上,把过去 H5 无法承载的滑动流畅度、页面切换、添加到购物车等体验,在直达服务上实现提升。对于原先 H5 开发者来说,可以无缝地将比较弱的 H5 功能转化成类似于 Native 体验的全新服务形态,提升用户转化率。

目前小米直达服务还处于 1.0 版本阶段,邀请开发者进行内测。从目前的反馈来说,开发者提出了很多改进意见。董红光介绍,之前小米直达服务的开发工具相对比较简陋,开发者也提出了一些开发工具层面的需求,这方面小米会进行补足;另外内测毕竟是一个小体量的承载,未来伴随用户的增多,需要在性能优化上下功夫。

小米直达服务平台架构图

对于小米来说,还有一个挑战来自于原生渲染功能,对于开发者来说,相当于在浏览器之外重写一个类似浏览器的东西,为了满足前端开发者的需求,需要在浏览器侧补充几十年沉淀下来功能,这就需要产品的持续迭代。

从内测所呈现的产品稳定性、流畅程度来看,董红光举了一个例子:虽然 APP 的复杂程度不一样,但是平均来看,60 帧是衡量流畅度的重要体现,目前内测上线的应用绝大多数能达到 60 帧。另外从内存占用来看,通过直达服务直接进行原生体验,只需要几十兆甚至十几兆,内存占用就可以启动整个应用。

面向开发这层,小米直达服务会做很多的技术储备,比如“一次开发多端运行”功能,这件事情对于开发者来说会非常有吸引力,一次开发,就可以在安卓端、直达服务平台端、浏览器端、iOS 端都能运行。

直达服务是 MIUI 的下一步

如果从公司战略层来看待小米直达服务,可以发现这件事情不仅仅是技术驱动这么简单。小米直达服务做的是生态,既影响小米硬件、互联网、新零售三大业务形态,也影响用户侧、开发者侧、合作伙伴侧整个产业链条。

从公司角度来看,李晓璐表示,小米直达服务牵涉到 MIUI 的下一步,在将内容提供给用户的方式上,如何在操作系统层面进行重构;而且不仅是在既有互联网生态中探索,更能伴随着语音、图片、智能硬件等新场景的发展,探索下一代应用的交互及服务方式。

而作为一个生态,更需要培养生态链条上各方的美誉度、忠诚度,如何让开发者和用户对小米直达服务满意,这并非把产品功能做好就够了。

结束语

这次的采访,是李晓璐和董红光共同接受 InfoQ 的访谈,两个人背后是两个团队在小米直达服务上的协作和配合。李晓璐负责的是生态建设、拓展团队,而董红光负责的是执行引擎和框架开发团队,两个团队加起来有 40 多人,精诚合作、优势互补。这一团队建制也从侧面反映小米直达服务对于小米的重要程度,以及机遇和挑战之大。由小米直达服务,我们看到了小米在生态建设上的野心和决心。

关于受访嘉宾:

李晓璐:小米开发者生态业务负责人

个人介绍:美国医学影像 AI 背景,在开发者生态圈深耕 7 年,擅长操盘生态型业务,热爱“从 0 到 1”。原百度商业产品高级产品经理,曾在百度网盟、原生广告团队完成多个新产品孵化,对互联网商业变现模式理解深刻。在小米 MIUI,和小米推送一起做到月活 8 亿,带领团队孵化出小米直达服务,同时负责小米开放平台、小米卡包等多个生态型业务。

董红光:MIUI 技术总监

毕业于北京航空航天大学计算机专业,曾就职于 IBM 中国开发中心,负责服务器端中间件的研发工作,6 年多前加入小米,初期负责 MIUI 系统换肤能力和主题市场的研发工作,后负责 MIUI 应用开发框架的研发工作,直到现在,目前关注的领域主要是移动客户端和前端的应用开发框架相关技术。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群。投稿请发邮件到 editors@cn.infoq.com,注明“前端之巅投稿”。


登录查看更多
0

相关内容

小米公司正式成立于 2010 年 4 月,是一家以智能手机、智能硬件和 IoT 平台为核心的消费电子及智能制造公司。创业仅7年时间,小米的年收入就突破了千亿元人民币。截止 2018 年,小米的业务遍及全球 80 多个国家和地区。小米的使命是,始终坚持做“感动人心、价格厚道”的好产品,让全球每个人都能享受科技带来的美好生活。
【高能所】如何做好⼀份学术报告& 简单介绍LaTeX 的使用
【实用书】Python爬虫Web抓取数据,第二版,306页pdf
专知会员服务
117+阅读 · 2020年5月10日
【SIGMOD2020-腾讯】Web规模本体可扩展构建
专知会员服务
29+阅读 · 2020年4月12日
【WWW2020-微软】理解用户行为用于文档推荐
专知会员服务
35+阅读 · 2020年4月5日
【新加坡国立大学】深度学习时代数据库:挑战与机会
专知会员服务
33+阅读 · 2020年3月6日
近期必读的6篇AI顶会WWW2020【推荐系统】相关论文
专知会员服务
56+阅读 · 2020年2月25日
阿里巴巴达摩院发布「2020十大科技趋势」
专知会员服务
106+阅读 · 2020年1月2日
Keras作者François Chollet推荐的开源图像搜索引擎项目Sis
专知会员服务
29+阅读 · 2019年10月17日
亿级订单数据的访问与存储,怎么实现与优化?
码农翻身
16+阅读 · 2019年4月17日
深度 | 推荐系统如何冷启动?
AI100
17+阅读 · 2019年4月7日
从webview到flutter:详解iOS中的Web开发
前端之巅
5+阅读 · 2019年3月24日
蚂蚁金服微服务实践(附演讲PPT)
开源中国
18+阅读 · 2018年12月21日
DataCanvas周晓凌:如何为用户提供最佳体验的实时推荐系统
DataCanvas大数据云平台
5+阅读 · 2018年11月12日
浅谈浏览器 http 的缓存机制
前端大全
6+阅读 · 2018年1月21日
抖音的 2017 和它背后的黑科技
PingWest品玩
8+阅读 · 2018年1月4日
Neo4j 和图数据库起步
Linux中国
8+阅读 · 2017年12月20日
有了场景和画像才懂用户
互联网er的早读课
6+阅读 · 2017年8月26日
Arxiv
5+阅读 · 2018年10月23日
Arxiv
6+阅读 · 2018年5月18日
VIP会员
相关VIP内容
【高能所】如何做好⼀份学术报告& 简单介绍LaTeX 的使用
【实用书】Python爬虫Web抓取数据,第二版,306页pdf
专知会员服务
117+阅读 · 2020年5月10日
【SIGMOD2020-腾讯】Web规模本体可扩展构建
专知会员服务
29+阅读 · 2020年4月12日
【WWW2020-微软】理解用户行为用于文档推荐
专知会员服务
35+阅读 · 2020年4月5日
【新加坡国立大学】深度学习时代数据库:挑战与机会
专知会员服务
33+阅读 · 2020年3月6日
近期必读的6篇AI顶会WWW2020【推荐系统】相关论文
专知会员服务
56+阅读 · 2020年2月25日
阿里巴巴达摩院发布「2020十大科技趋势」
专知会员服务
106+阅读 · 2020年1月2日
Keras作者François Chollet推荐的开源图像搜索引擎项目Sis
专知会员服务
29+阅读 · 2019年10月17日
相关资讯
亿级订单数据的访问与存储,怎么实现与优化?
码农翻身
16+阅读 · 2019年4月17日
深度 | 推荐系统如何冷启动?
AI100
17+阅读 · 2019年4月7日
从webview到flutter:详解iOS中的Web开发
前端之巅
5+阅读 · 2019年3月24日
蚂蚁金服微服务实践(附演讲PPT)
开源中国
18+阅读 · 2018年12月21日
DataCanvas周晓凌:如何为用户提供最佳体验的实时推荐系统
DataCanvas大数据云平台
5+阅读 · 2018年11月12日
浅谈浏览器 http 的缓存机制
前端大全
6+阅读 · 2018年1月21日
抖音的 2017 和它背后的黑科技
PingWest品玩
8+阅读 · 2018年1月4日
Neo4j 和图数据库起步
Linux中国
8+阅读 · 2017年12月20日
有了场景和画像才懂用户
互联网er的早读课
6+阅读 · 2017年8月26日
Top
微信扫码咨询专知VIP会员