Google力推的那些前端技术，最近有何进展？

   <p>Google I/O 2018 已于上周落下帷幕，普通民众看的是新产品，开发者们关注的是新技术。透过这次大会，我们不难发现，Google 已经从 mobile first 转向 AI first，AI 之后，就是移动和前端技术了，移动无非是 Android P 和 Flutter 等，前端涵盖的技术从 Web 框架到 Web 工具，包括 Angular、PWA、polymer、AMP 等，下面让我来为大家捋一捋 Google 力推的这些前端技术最近都有哪些进展。</p>    <p><strong>Angular</strong></p>    <p>Angular 是前端三大框架之一，它与 React、Vue 的“争斗”一直都没有停止过，经过 Angular 团队和开发者们的努力，Angular 已经建立了拥有上百万开发者规模的社区和生态系统。在今年I/O大会开始的前几天，Angular 6 正式发布，添加了 ng update 和 ng add 这样的新功能，让你的应用程序保持最新的状态，帮助 Angular 开发者加快创新的步伐。</p>    <p>Angular 渲染器 Project Ivy 也有很大的改进，它能使 Angular 调试更容易，以更快地速度编译和运行，它还可以与现有的应用程序一起使用，Angular 团队还在小型 Hello World 应用程序做了演示，不使用的 Angular 功能将自动从应用的 JavaScript bundle 自动删除。</p>    <p><strong>PWA</strong></p>    <p>PWA 应该是这两年前端最火的技术之一了吧。Google 声称世界各地各行业在在 PWA 的构建上都获得了很大的成功，星巴克在推出 PWA 网站后，日活跃用户数量增加了 2 倍，他们对广告网站进行测试，发现当一个网站切换到 PWA 时，平均转化率提高了 20%。</p>    <p>PWA 近期动态：</p>    <ul>     <li> <p>早期的 PWA 主要专注于移动设备，但是由于平台限制，iOS 无法支持，但是今年年初，终于迎来了好消息，苹果宣布 iOS 11.3 将迎来 PWA，这使得开发跨平台的 PWA 成为了可能。</p> </li>     <li> <p>2 月，微软着手在 Windows 商店中增加 PWA，宣布渐进增强式 Web 应用将在 Win10 系统上线。</p> </li>     <li> <p>2 月底，PC 端的 Chrome 正式支持 PWA，具体实现方式可参考本篇文章。</p> </li>     <li> <p>I/O大会上，Google 宣布今年 6 月，Chrome 67 将支持 PWA“安装”到桌面上，同时保留在浏览器中查询的功能，如在页面中查找、共享网址、Google Cast 支持等，下图为 Spotify 部署桌面 PWA 后的部分体验。</p> </li>    </ul>    <p style="text-align:center"><img alt="Google力推的那些前端技术，最近有何进展？" src="https://simg.open-open.com/show/80b90c0806069291cd8e45fc07cc79c7.gif" /></p>    <p><strong>Service Worker</strong></p>    <p>Service Worker 是近年来 Web 最大的改进之一，它是 Chrome 团队力推的一个 Web API，它将开发人员从页面的生命周期中解放出来，运行于浏览器后台，可以控制打开作用范围下的所有页面请求，使 Web 应用程序能够脱机工作。</p>    <p>今年三月，苹果宣布 iOS 和 MacOS 上的 Safari 11.1 支持 Service Worker，4 月底，微软也宣布 Microsoft Edge 也将支持 Service Worker，这意味着现在所有的主流浏览器都支持 Service Worker 了。</p>    <p>为了使用过程更简便，Service Worker 开发团队创建了 Workbox 库，它能将许多常用的、强大的 service worker 模式封装到易于使用的 API 中。</p>    <p><strong>Workbox：</strong></p>    <p><a href="/misc/goto?guid=4959013387236659289">https://developers.google.com/web/tools/workbox/</a></p>    <p><strong>WebAssembly</strong></p>    <p>WebAssembly 使网站能够运行用C或 C ++ 等语言编写的高性能低级代码，为 Web 打开了新世界，今年 3 月，来自 Autodesk 的 AutoCAD 就采用了 35 年前的代码库，并用 WebAssembly 编译让其直接在浏览器中运行，这意味着，无论你的设备或操作系统如何，你都可以直接在浏览器中用 CAD 绘图。</p>    <p><strong>Polymer</strong></p>    <p>Polymer 是 Google 主推的一个 JavaScript 库，它可帮助你创建自定义的可重用 HTML 元素，并使用它们来构建高性能、可维护的 App。</p>    <p>在I/O大会上，Google 推出了 Polymer 3.0，Polymer 3.0 致力于将 Web 组件的生态系统从 HUML Imports 转移到 ES Modules，包管理系统将支持 npm，这使你更容易将基于 Polymer 的 web 组件和你喜欢的工具、框架协同使用。</p>    <p><strong>AMP</strong></p>    <p>AMP 是 Google 推出的一种为静态内容构建 Web 页面，提供可靠和快速渲染，加快页面加载速度的 Web 组件库。目前为止，来自 4600 万个域名的网页已经超过 60 亿个，他们在 Google 搜索的平均加载速度不超过 1 秒。</p>    <p>由于移动内容消费正在往全屏、简练的排版风格转变，为了满足内容发布商的需求，APM 团队日前宣布开发了 AMP stories，它是一套为 mobile-first storytelling 开发的 Web 组，它支持原生视频和图像，具有丰富的视觉效果，可通过动画和可点击的交互方式来讲故事，这对于突发事件的新闻报道具有重要作用，因为有时候图片能更直观和快速地向读者表达意思。</p>    <p style="text-align:center"><img alt="Google力推的那些前端技术，最近有何进展？" src="https://simg.open-open.com/show/d4dad1ea089be71fefe81ef642db0b62.gif" /></p>    <p><strong>Lighthouse</strong></p>    <p>Lighthouse 是一个分析网络质量的工具，为你提供网站性能衡量指标和指导，它可以直接从 Chrome DevTools 内部进行访问，从命令行运行或与其他开发产品集成，仅在 2018 年，就有 50 万开发人员在他们的网站上运行 Lighthouse。</p>    <p>本月初，Lighthouse 3.0 发布，最新的版本对网站的审核速度会更快，具有全新的报告界面，更多更新内容，可进入 Lighthouse 官网查看。</p>    <p>链接：<a href="/misc/goto?guid=4959013387341881974">https://developers.google.com/web/updates/2018/05/lighthouse3</a></p>    <p>参考链接</p>    <p><a href="/misc/goto?guid=4959013387434789359">https://blog.chromium.org/2018/05/the-state-of-web-at-google-io-2018.html</a></p>    <p>来自: <a href="/misc/goto?guid=4959013387524495996" id="link_source2">InfoQ</a></p>