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

2018 年 5 月 3 日 前端之巅

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

作者｜刘翔

编辑｜Elvis

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 在国外应用比较广泛，有一些原因：

Chrome 团队的大力支持和推广。
国外流量主要在浏览器内，国外网络环境并不好。
国外 PWA 相关的基础设施非常完善。比如 Push 服务器（GCM/FCM）、Android 原生系统的支持（比如后台唤醒浏览器进程）。

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

国内 PWA 相关的基础设施不完善。国内还未有可用的 Web Push 服务器，各大浏览器对 PWA 的支持参差不齐。
国内很多页面还是 http，使用 PWA 之前需要先改造为 https。
国内期望双端统一（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 功能的过程中主要有两个节点：

UC 浏览器 U4 内核 1.0 版本（基于 Chromium 40 内核），于 2016 年 11 月 11 日发布。
这个版本只支持 PWA 一些基础特性，很多 API 不完善，比如不支持 caches.match，很多 ES6 特性不支持。比如不支持箭头函数（=>），调试不方便，devtools 没有 Application 面板，ServiceWorker 启动失败很难查找原因。PWA 支持不完善也是驱动我们去升级更高版本内核的原因。
UC 浏览器 U4 内核 2.0 版本（基于 Chromium 57 内核），于 2017 年 12 月 25 日发布。
这个版本对 PWA 的支持非常完备，ES6 的支持也很完善，前端可以非常自由地写 PWA 页面了。

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

HTML 文档未关闭的情况下，ServiceWorker 线程也可能会关闭。
这就意味着 ServiceWorker 不应定义全局变量。另外，ServiceWorker 的 Stop 会 Close MessageChannel，重新启动之后也无法重建原来的 MessageChannel。在双向通信时要特别注意，HTML 文档未关闭时，MessageChannel 可能已关闭。
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 的发展，让前端的能力更加强大更加无所不能。

作者介绍