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

  • 刘翔

2018 年 5 月 3 日

话题:阿里巴巴语言 & 开发架构

看新闻很累?看技术新闻更累?试试下载 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(同微信)。

阿里巴巴语言 & 开发架构