BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

PWA技术在阿里UC内核的实践及影响

| 作者 刘翔 关注 0 他的粉丝 发布于 2018年5月4日. 估计阅读时间: 13 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料!

导读:2016年,Google提出了PWA,志在增强Web体验。可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息等等,这些特性可使Web应用渐进式地变成App,甚至与APP相匹敌。在国外PWA技术已经被广泛应用,甚至出现了专门的应用下载商店。在国内,我们也看到几乎所有的一线互联网巨头都在研究PWA的落地实践。UC浏览器在国内众多浏览器中,第一个全面支持了PWA技术。

2018年6月GMTC全球大前端技术大会上,我们请到了阿里巴巴UC内核无线开发专家刘翔老师,请他来谈谈:从UC内核角度出发,PWA技术在阿里体系的实践及影响。我们提前对他进行了专访,下面是InfoQ对他采访的简单整理。想了解更多国内PWA技术落地实践的优秀案例,可以扫描下方二维码关注GMTC全球大前端技术大会(备注:大会8折优惠火热售票中,扫码购票)。



InfoQ:您的名字跟一位体坛名将的名字一样,他在赛场上跨过了一个又一个的栏,看您的个人履历也是精彩纷呈,在技术的赛道上跨过了一道又一道技术栏,能不能谈谈您自己,给我们分享一下您的个人工作经历呢?

刘翔:我在2012年开始在UC浏览器内核团队工作,见证了UC内核在Android平台的发展历程,与UC内核一起成长。在U3内核年代,我们对浏览器内核进行了深度定制,为了用户体验,加入了非常多特色功能,比如省流量、云端加速、夜间模式、适应屏幕等等。在U4内核年代,我们更加关注标准化,内核层面的改动尽可能不破坏标准。在整个UC浏览器的发展过程中,我们一直在追求最优秀的性能。除了持续优化浏览器内核性能之外,我们也积极参与核心Web业务的性能优化。PWA与我们赋能业务的理念非常接近,我们会快速拥抱PWA技术,加速给前端开放内核基础技术。

InfoQ:我们看到国内外主流浏览器都提供了对PWA技术的支持,在国外市场上PWA应用已经越来越多,更是出现了专门的应用商店,刘老师能否谈谈PWA技术在国内被应用到什么程度了呢?根据UC的观察,国内有哪些优秀案例?

刘翔:先解析一下PWA技术(Progressive Web Apps),PWA是非常包容的概念,代表了让Web Pages能成为Web Apps的一系列技术。我们通常讨论的PWA,主要局限于Service Workers相关的一系列技术,比如Cache、Fetch、Push、Sync等等。

PWA在国外应用比较广泛,有一些原因:

(1)Chrome团队的大力支持和推广。

(2)国外流量主要在浏览器内,国外网络环境并不好。

(3)国外PWA相关的基础设施非常完善。比如Push服务器(GCM/FCM)、Android原生系统的支持(比如后台唤醒浏览器进程)。

PWA在国内技术讨论非常活跃,实际应用却偏少,有一些原因:

(1)国内PWA相关的基础设施不完善。国内还未有可用的Web Push服务器,各大浏览器对PWA的支持参差不齐。

(2)国内很多页面还是http,使用PWA之前需要先改造为https。

(3)国内期望双端统一(Android & iOS),而iOS直到11.3 beta才支持Service Workers。

现在国内主要的浏览器内核都已升级到Chromium 50以上,iOS也逐步开始支持,https已成为主流,预计2018年国内PWA会大规模实际应用起来。

从我们的观察,PWA使用比较深入的是饿了么团队。饿了么有很多文档介绍相关实践,并且成为了PWA官方的ShowCase(https://developers.google.cn/web/showcase/2017/eleme)。

UC信息流、天猫、支付宝、豆瓣等大型业务也在逐步使用PWA技术,可以预见,2018年会是PWA快速发展的一年。

InfoQ:我们看到U4内核的2.0版本已经实现了支持PWA功能,UC支持PWA的过程是怎样的,支持的程度如何,是否和Chrome一样,实现过程中是否和PWA官方团队沟通过一些技术问题?

刘翔:UC浏览器U4内核1.0版本(基于Chromium 40内核)于2016年11月11日发布,已经支持PWA功能,但很多特性都不完善,很多情况下需要polyfill。U4内核2.0版本(基于Chromium 57内核)于2017年12月25日发布,非常全面的支持PWA功能。

PWA在内核层面与Chromium保持一致,一些需要用到外壳甚至是系统特性的,则需要另外适配,比如Add to homsescreen,Web Push Notification。

InfoQ:为什么说很多页面用上PWA之后效果没想象的好,PWA有哪些局限性?那么UC是如何解决SW的启动耗时等性能上的问题,玩转ServiceWorker Push预加载的?

刘翔:Chrome团队在宣传PWA时,大部分都是描述PWA带来的革命性变化,很少有描述到存在的问题。开发者对PWA的预期非常高,普遍认为上线PWA之后可以让页面的性能大幅提升。

目前国内开发者用到最多的是Fetch和Cache功能,从理论上分析,资源缓存在ServiceWorkerCache,与资源缓存在HttpCache,性能上并不会有明显的差异。

ServiceWorker在控制页面之前,必须先启动ServiceWorker线程,而ServiceWorker线程的启动有较大的成本(约200ms)。我们与Chrome团队深入沟通了ServiceWorker的启动性能问题,Chrome团队会从架构层面去综合优化(https://docs.google.com/document/d/1hqkxASTcy4DFVh8n7hmiP3ZKKXoi2MxgpwLxXIHLqmI/edit)。预计在2018年底,ServiceWorker的启动性能问题可以得到较好的解决。在官方未彻底解决之前,我们会考虑在文档未关闭时不Stop空闲的ServiceWorker,减少可能的启动次数。

ServiceWorker启动性能问题,会对PWA的效果带来一定影响,那么,我们应该如何才能让PWA页面的性能更好呢?PWA很关键的一个特性是Reliable(可靠),比如它能让开发者很精细地控制每个资源的缓存,它可以通过Push唤醒ServiceWorker提前预加载资源,它有更加丰富的资源加载策略。很多页面HTML主文档可能不允许缓存太长时间,但使用PWA一些特性可以保证文档得到及时更新,开发者可以自由地控制让HTML主文档也能缓存,这样就可能带来较大的性能提升。传统的HttpCache,让资源在缓存时性能会很好,而PWA是让资源非常可靠地缓存起来,让页面性能一直都很好。

InfoQ:UC浏览器在实现PWA功能的过程中有哪些重要节点?又踩过哪些坑呢?

刘翔:UC浏览器在实现PWA功能的过程中主要有两个节点:

(1)UC浏览器U4内核1.0版本(基于Chromium 40内核),于2016年11月11日发布。

这个版本只支持PWA一些基础特性,很多API不完善,比如不支持caches.match,很多ES6特性不支持。比如不支持箭头函数(=>),调试不方便,devtools没有Application面板,ServiceWorker启动失败很难查找原因。PWA支持不完善也是驱动我们去升级更高版本内核的原因。

(2)UC浏览器U4内核2.0版本(基于Chromium 57内核),于2017年12月25日发布。

这个版本对PWA的支持非常完备,ES6的支持也很完善,前端可以非常自由地写PWA页面了。

在实际业务实践中,我们也遇到过一些问题:

(1)HTML文档未关闭的情况下,ServiceWorker线程也可能会关闭。

这就意味着ServiceWorker不应定义全局变量。另外,ServiceWorker的Stop会Close MessageChannel,重新启动之后也无法重建原来的MessageChannel。在双向通信时要特别注意,HTML文档未关闭时,MessageChannel可能已关闭。

(2)ServiceWorkerContainer.ready事件在某些特殊条件下可能不会回调。

这个问题一般出现在下面场景:当前ServiceWorker还未完成注册流程,同样URL的ServiceWorker又开始了注册流程。

Chromium 57内核已经修改了ready的处理方式,调整为主动获取的方式(旧版本是注册完成后回调通知触发ready)。在前端JS调用ready时,浏览器内核会主动去获取对应的active worker的注册信息,并触发ready事件,这种处理方式能保证前端调用时都能正确触发ready事件。

InfoQ:可以简单的谈一谈PWA技术在阿里体系里是如何被广泛应用的吗,未来您和您的团队会有哪些新尝试?

刘翔:阿里体系的应用,基本都使用UC内核。UC内核在2017年底升级到U4 2.0,全面支持PWA特性,这样阿里体系的应用的PWA环境就非常成熟了。应用程序(比如,手淘,支付宝)与浏览器对PWA的诉求还不太一样,应用基本都是单窗口的,基本不会有多个ServiceWorker页面同时打开的情况,我们会出于性能等方面的考虑,在页面未关闭时不关闭空闲的ServiceWorker线程。

PWA一些特性在浏览器上支持存在问题,我们会考虑在UC内核SDK上支持,比如ServiceWorker Push、Background Sync、Background Fetch等等。

InfoQ:最后一个问题,乔布斯曾相信 Web 应用才是移动应用的未来,PWA的出现给Web应用模型打开了一扇新的大门,您认为PWA的未来是怎么样的,会成为主流吗?

刘翔:PWA是非常包容的概念,代表了让Web Pages能成为Web Apps的一系列技术。在PWA之前,浏览器厂商更倾向于给前端开放高层的已经形成标准的技术,即使前端发现这些技术并不好用(比如Application Cache),也无何奈何。

在PWA之后,浏览器厂商更倾向于给前端开放底层的基础技术,比如给前端开放使用摄像头的能力,前端可能使用这个能力去实现WebAR,等前端用得很好之后,再考虑将高层API标准化。这种思路是加速给前端开放底层基础能力,前端可以直接使用这些基础能力来实现各种需求。我们相信PWA会加速Web的发展,让前端的能力更加强大更加无所不能。



刘翔,阿里巴巴UC内核技术专家,负责UC内核性能优化及前端页面优化,专注于Web体验优化和PWA技术研究。与支付宝团队基于ServiceWorker打造了支付宝小程序框架,与天猫团队将手淘的Web页面体验优化到极致,推进PWA技术在阿里巴巴集团业务的落地。

感谢刘翔老师接受我们的采访,期待刘翔老师在GMTC全球大前端大会上更加详细的分享。更多关于前端技术最新最火的议题可以点击GMTC全球大前端大会了解详情,大会8折报名火热进行中,有任何问题欢迎咨询票务经理 Amy,电话:18514549229(同微信)。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT