作者 | 彭星
编辑 | Yvonne
2018年5月10日，又一届GoogleI/O 落下帷幕。似乎每一届 I/O 都有非常惊艳的产品，今年也不例外，相信 Google Assistant 打电话预约的演示给大家留下了很深刻的印象。让人不禁惊叹“未来已来”。AI 之外，Google在Web 技术上也带来了多项优化 Web 用户体验和开发体验的新成果。笔者在现场参加了大部分与 Web 相关的演讲，在此对 Web 的内容亮点进行了总结，并说说自己的想法。
Web 技术概览
PWA
今年 Web 内容核心是用户体验，PWA 和 AMP 占据了很大篇幅，除此之外还有 Web Assembly、Web VR&AR 等。值得一提的是，基本上每个 Web 的 Session 都提到了 PWA。由此可见，Google 确实在推动 PWA 上花了很多精力，提出并推进了很多新的标准。Chrome 对一些新特性的支持，推动其他浏览器跟进最新标准等，成绩也很瞩目，至少在国外很火，用户的接受度也很高。
所有主流浏览器都已支持 Service Worker
首先要强调的是所有主流浏览器都已支持 Service Worker，包括最近才支持的 Safari 和 Edge。国内主流浏览器也都支持，其中包括微信、UC、QQ、手机百度、百度等，大家可以放心大胆的使用 Service Worker 这项新技术了。
Service Worker 已在所有主流浏览器上获得支持
（图片来源：Google I/O 官网：https://events.google.com/io/recap/ ）
Service Worker 的兼容性，可以在这里看 https://lavas.baidu.com/ready#navigator-serviceworkerPWA的收益已得到认可
在 Web 分论坛上，演讲者们展示了大量示例，其中有大家熟知的 ofo 和星巴克。改造完 PWA 之后，它们收益非常明显：星巴克官网的日活跃用户和月活跃用户增加了两倍之多。据 Google 统计，改造成 PWA 之后，网站的转化率平均提升20%以上，成绩非常瞩目！
除了 ofo 和星巴克，在 Google 自有产品上，PWA 的优势依然显著，Google Maps 和 Google Search 均上线了 PWA 版本。其中Google Search 用户每次请求减少了 50% 外链 JS 文件的请求！对于像Google Search 这样体量的网站，减少 50% 的请求意味着节省带宽的同时提升了展现速度，这无疑是巨大的收益。
桌面版 PWA
桌面版 Chrome 已经支持将 PWA 站点添加到桌面，类似于应用。下面是笔者在 Mac 上截的图，所用站点为 Lavas 官网(https://lavas.baidu.com)。
桌面版 PWA
如上图所示，桌面版和 Mac 原生应用没有区别，甚至在一定程度上能代替 Electron，如果您的站点不需要一些特殊的系统能力，使用桌面版将非常简单快捷。
需要注意的是，这个功能尚在实验阶段， Chrome 默认没有开启此功能。有提前体验需求的开发者，可以通过下图所示开启此功能。
如何打开桌面版 PWA
Web App Manifest
Web App Manifest 对于了解 PWA 的开发者并不陌生，它是让站点添加到桌面的一个标准。Web App Manifest 标准定义了一个外链的 JSON 文件，还有一些全局事件，如 beforeinstallprompt, afterinstalled 。
值得注意的是，在 Chrome 68 版本之后，Chrome 将不再自动弹出 PWA 安装对话框，开发者需要监控beforeinstallprompt 事件，然后调用 prompt 函数才能显示该对话框。
关于其他 PWA 相关信息，有兴趣的同学可以查看 I/O 2018 的相关视频。
AMP
AMP 在这次的大会上是除 PWA 之外出现最多的词汇。AMP （Accelerated Mobile Pages），是通过加速移动网络的网页加载，从而提升体验的一项开源项目。（AMP 官网：https://www.ampproject.org/）
AMP 的应用延伸到本次 I/O Web的大部分话题之中，包括 AMP 本身、AMP Story、Web Packaging 等。
AMP 在提高站点用户转化率效果显著
同样，AMP 也给出了如何帮助网站提高转化的案例
-
TENCENT NEWS - 用户停留时长停留了 2 倍，跳出率降低了 40%。
-
AliExpress - 非搜索流量的转化率提高了 31％。
国内的站点无法使用AMP的服务，不过百度推出了类似于 AMP 用于加速用户网页的一套技术 MIP （Mobile Instant Pages）。笔者的团队现在正在做 MIP 相关的工作。在MIP的实践中，站点的平均打开速度在1秒之内，站点的流量提升 5% - 30%。MIP 官网请点击"阅读原文"。
AMP Story
AMP Story 是基于 AMP 提供的一些自定义标签实现的类似于富应用展示型的网页，文字描述不够准确，还是看图更直接一些。
AMP Story 例子
官网上也有一些示例，大家可以试试，效果挺不错。AMP Story 官网链接：
https://www.ampproject.org/stories
Web Packaging
简单的来说，Web Packaging 的作用是通过签名交换的方式允许第三方（CDN）托管并分发网站的内容，因为这种方式能保证完整性和真实性，所以浏览器还会保留显示原有站点的链接，而不是 CDN 的域名。
这篇文章介绍的比较详细：https://amphtml.wordpress.com/2018/05/08/a-first-look-at-using-web-packaging-to-improve-amp-urls/
在 Web Packaging 之前， AMP 和 MIP 通过 CDN 缓存第三方站点的内容，在搜索结果页打开的时候，URL 显示的是 CDN 的地址，这被很多站点不能接受，Web Packaging 这个标准也是因此而推出的。这个标准不只解决 AMP 和MIP 的问题，开发者同样也能将它用在自己的站点。
现场演示的时候，效果确实不错，不过Chrome 66.0.3359.158 目前还没看到 WebPackaging 实装，所以看不到效果，比较可惜。期待 Web Packaging 标准能够被更多主流浏览器支持。
AMP & PWA
AMP 提供了从 AMP page 顺畅地切换到 PWA 站点的方案。
首先，AMP 提供了一些能够做复杂操作的标签，并且支持一定程度上的双向绑定，amp-bind, amp-list读者可以了解一下。
其次，AMP 还提供一个 amp-install-serviceworker 标签，在 AMPpage 里安装 Service Worker，预先安装 Service Worker 并缓存文件，让 AMPpage 跳转到 PWA 时更快。
Web Assembly
Web Assembly 允许将开发者编写的 C/C++ 编译为二进制，在浏览器运行，性能非常好，很适合做复杂的计算，尤其特别适合做渲染引擎，比如说游戏。AutoCAD 就是用 Web Assembly 实现的，学过数字电路的同学应该比较了解，AutoCAD 是一款用来设计集成电路板的软件，它本身非常复杂，并且一些渲染动画涉及到非常复杂的计算，因此 Web Assembly 很合适。
AutoCAD & Web Assembly
国外主流浏览器都已经支持 Web Assembly 了，Chrome、Firefox、Safari、Edge，前途一片光明，而反观国内的壳浏览器，对于 Web Assembly 的支持差强人意。
如果你觉得写 C++ 很难，容易出问题，不要担心，其他语言已经在路上了。以后你甚至可以写 Go，然后编译成 Web Assembly 的二进制。
Program Languages are on the road
Lighthouse
Lighthouse 确实是一个很好的工具，帮助开发者排查自己站点不足。它会从五个不同的纬度（网站性能、PWA能力、辅助功能、最佳实践应用、SEO）给出优化的建议，指导站长如何优化站点。
Lavas 站点的 lighthouse 评分
细想一下，Google 推出 Lighthouse 是一件很聪明的事情，它不仅能帮助开发者优化站点，还树立了一个标准（灯塔），让开发者朝着灯塔走，就能开发出一个个体验良好的站点，帮助 Web 生态的健康发展。
I/O 2018 发布了 Lighthouse 3.0，这里是发布的文章优化了显示和性能，没有太大的变化，我倒是期待在 Chrome 68/9 版本之后内置的 Lighthouse，毕竟墙内很多开发者无法从 Chrome Web Store 安装 Lighthouse。
感想与希冀
除了上述内容，Web 系列还有很多令人激动的东西，包括笔者个人非常感兴趣的 Guess.js (https://github.com/guess-js)， Web VR&AR 酷炫演示，Polymer 和 Web Components，One-tap sign up 和 Credential Management API 等，都是打造良好 Web 体验的利器，篇幅有限在此就不一一赘述了。
反观国内的 Web 发展，其实在很多领域已经跟上甚至超越了国外：比如Google Map AR 导航，国内的地图应用在去年就上线了相似的功能；移动网页加速项目 MIP 在国内有超过一万家站点使用，每天从百度搜索点出的 MIP 页面超过1.3亿。不过 Web 能力和体验的提升，仍然需要技术上的打磨，厂商和浏览器的支持，以及更完善的技术标准。
在 Web 的发展上，Google 无疑走在世界最前沿，我们在奋力追赶。
Brilliant Open Web
BOW（Brilliant Open Web）团队，是一个专门的Web技术建设小组，致力于推动 Open Web 技术的发展，让Web重新成为开发者的首选。
BOW 关注前端，关注Web；剖析技术、分享实践；谈谈学习，也聊聊管理。
