Google IO 16 / Mobile Web 笔记

移动的 Web

IO16 的 Web 技术话题大类直接叫作 “Mobile Web”，移动的概念已经涵盖了整个 Web，而非只是 Web 的一部分了。

最近几天看了不少 IO16 Web 相关演讲，简单做些笔记。仅作个引子，时间充足的话还是建议大家去逛逛 IO16 官网，写就本文时绝大多数视频都已经搬上 YouTube，第一手的资料总是最好的。

• Google IO 2016 全部视频（150+）

PWA 的崛起

本届 IO 在 Web 技术领域的最大关键字就是 PWA，PWA？PWA。Progressive Web Application。WebApp 走过了最初证明自己的阶段之后，未来的方向在哪里？就是随着浏览器有条不紊地推进新特性，WebApp 基于此来渐进式地改善用户体验（不像几年前各种雄心勃勃试图取代 Native 的尝试，而是更务实地号召渐进增强）。

看看这满满的议程，就不提其他那些没说 PWA 但基本上也是相关内容的演讲了：

• Building the Google I/O Web App: Launching a Progressive Web App on Google.com

• Instant Loading: Building offline-first Progressive Web Apps

• Progressive Web Apps across all frameworks

• Polymer and Progressive Web Apps: Building on the modern web

• Angular 2 and Progressive Web Apps

• Great libraries and tools for great Progressive Web Apps

其实 PWA 不是新词儿，外面已经有不少实现的商业案例：

• selioapp.com，实现了 PWA 之后平均会话时长增加了6分钟——达到跟 Native App 同样的水平，而用户获取成本只有 Native App 的十分之一。

• 5miles，用户转化率提高 30%；

• FlipCart，用户转化率提高 70%；

• AliExpress（没错就是你们知道的那个阿里），用户转化率提高了 104%。

PWA 所应用到的技术包括但不限于（随着浏览器的进化还会越来越多）：

• 离线和自动更新。对用户体验改善最显著的特性，依赖 Service Worker 实现。以往在宽带环境下我们希望加载速度在一秒以内，3G 网络下的目标是三秒以内，而有了 Service Worker，我们的目标是尽量接近 0 秒。Service Worker 就是这么个大杀器；

• 无缝对接宿主环境的各种原生 UI，如推送通知等；

• 响应式，适配各种屏幕大小；

• 可安装到主屏等等。

https://developers.google.com/web/progressive-web-apps/

Android Instant App

也许 Google 的出发点是要在移动时代继续保持搜索的核心地位（这不是问题，当年 Jobs 围剿 Flash 不就正好也推动了 HTML5 的风生水起？），对于 Native App 而言依然是个很赞的尝试，头一次 Native App 开始拥有 Web 的分发能力，虽然还只是一点点，但这个方向足够令人期待。

https://developer.android.com/topic/instant-apps/

Firebase 涅槃

• 没想到 Firebase 被收购之后不但没有消失，而且转正成了亲儿子，赞！

• Firebase 成为 Google 的移动开发平台中枢，除了最初的实时数据存储和 Auth 等服务之外，集成了 Analytics、Cloud Messaging、Crash Report、TestLab 等一大堆，文档齐全，Firebase 这两年真心是憋了个大招出来。

• 唯一不妙的是各种域名开始转到 google.com 名下，这对国内来说可能是个问题。

https://firebase.google.com/

Houdini 进展神速

相比 ES20XX 的如火如荼，CSS 的进化简直龟速。虽然新提出的 Houdini 草案（中文介绍） 看起来振奋人心但是没想过会进展这么迅速，现在已经有八个 spec 在推进了，W3C 治下的工作组能有这样的效率实在令人眼前一亮。

https://developers.google.com/web/updates/2016/05/houdini

Chrome DevTools 继续进化

给 Node.js 了一个大礼包

先是看到 Paul Irish 在演讲的最后十分钟里神神秘秘地 demo 了一点，第二天才正式公布的这个功能可以说是此次 DevTools 更新给我带来的最大惊喜，因为实在是等待了太久：Node.js 终于（将要）可以原生支持 DevTools 调试了。

这个 PR 集合了 Chrome、V8、Node.js 三个团队的共同努力，成果也是目前各种社区的调试工具如 node-inspector 等无可比拟的：Sourcemap 支持，控制台的 ES6 支持，Live Edit 特性，JS 执行分析和火焰图、内存调试、异步堆栈和 Promise 调试，并且基于新的 Chrome Debugging Protocol 未来还会支持 Firefox Tools 和 Microsoft VS Code 调试，点五个赞！

PS，目测大概会从 Node.js v7 开始正式加入。

其他的常规改进就不提了，基本上是每两个月 DevTools 都会有这么多更新出来，有兴趣的可以保持关注 Chrome DevTools 更新日志。