Chrome Dev Summit 2016 内容整理(部分)

此文章转载自 个人博客

Progressive Web Apps

今年若是你关注过 Chrome 开发团队的话，那必定或多或少的会听到过 Progressive Web Apps（PWA），实际上，今年 Chrome 团队可谓是 倾尽全力的推广 PWA，从上半年的 Google IO 大会关于 各种有关 PWA 的 9 个专题，直到今天刚刚结束的，基本是 PWA 推广大会的 CDS，可见随着 PWA 技术的成熟以及浏览器的支持度提升，不久必将会迎来一次爆发。若是你目前还不了解什么是 PWA ，请去 这里 自行补脑，这里我简单来讲，PWA 就是可以提供相似像 Navive App 同样体验的 Web App。它主要有几个特色：

• 能够添加到桌面，文艺点说就是具备可安装性

• 离线能力

• 消息推送

• 安全

• 响应式

博主凑热闹，最近把 个人博客 添加了离线和添加到主屏幕功能，若是你的手机支持（安卓手机新版 Chrome，目前苹果还不支持），固然，或者是 PC 端的 Chrome，欢迎体验。

好了，废话很少说，此次大会在 youtube 上实时更新，我趁热挑选了本身感兴趣的几个主题，整理了主要内容，因为时间比较短，有些内容只是知道了概念（甚至有些只知道了个新名词），若是不对，欢迎你们留言指正，我后面也会陆续更新。

KeyNote

点击 这里 观看视频。

首先是 Darin Fisher 的开场，介绍了 Chrome 以及 Web 的现状。

• 目标：让 Web 变得更先进。

• 目前 Chrome 拥有 20 亿用户（手机+PC）

• Link 很牛

• 每次交互的改变将会挖掘 20% 的潜在用户

• 移动端 Web：局限带来创新

• 移动端的挑战：分辨率，cpu，内存，电池，网络

• 60% 的手机用户是 2G 网络

• 印度 2.3 亿，美国 4.6 亿，中国 7.6 亿的网民

• 在印度 65% 人不上网，美国 20%

• Progressive Web Apps 从根本上提升 web 体验

• PWA demo

• 用 阿里 的 PWA 举例（原来老外也知道双十一），提升了 76% 的转化率

• 超过 3 秒的网页，53% 的用户选择离开

• Service Worker API

• 在 3G 环境下，要确保页面 5 秒内加载完成

• “添加到主屏幕”这个功能提升了用户 4 倍的浏览频率

• 消息推送：天天都有来自 5 万个域名下的 180 亿次推送

• Seamless Sign-In：在 AliExpress 中下降 85% 登录失败的概率，提升了 11% 的转化率

• Payment API

• Lighthouse 是个测试 PWA 的工具（测试了一下我博客的分数，竟然到了80分，窃喜~）

• Polymer

• Beta webcomponents

• AMP（Accelerated Mobile Pages）

• browser-issue-tracker-search 为开发者提供的网站，包括bug，w3c 标准，API 建议等

• Web assembly, WebGL 2.0, WebVR, WebAR, WebBluetooth

Building Progressive Web apps.

点击 这里 观看视频。

Thao Tran 主要是用一些数据和示例为咱们展现了 PWA 的价值以及意义。

• 去年的时候基本只有 Flipkart 作了 PWA 的产品，但今年目前为止已经有来自 35 个国家的 17K 个 PWA。

• 在美帝，PWA 已常常常会出如今各个热门技术杂志的头条。

• 简单介绍什么是 PWA

• 列举了几个 PWA 的例子以及带来有力数据，https://m.alibaba.com/，https://housing.com，这里不得不膜拜一下阿里。数据主要集中在用户转化率，效率以及开发成本。

• 用 West elm show 一下 PWA。

• 围绕 PWA 加载快，省流量列举数据。

• 再次列举几个 PWA 产品。

Future App Model: Advanced Service Worker

Jake 大神 的演讲，点击 这里 观看视频。

Jake 大神的演讲其实在他 以前的博客 中介绍过一些内容，演讲诙谐幽默，并又带来了不少干货：

• 介绍了 Service Worker 浏览器支持状况：

  • Chrome/Firefox：支持

  • Edge：实现中(高优先级)

  • Safari：Considering...(这里不知道怎么翻译，犹豫中？思考中？)

• Stream

  • Async iterators（https://github.com/tc39/proposal-async-iteration）

  • Transform streams（https://streams.spec.whatwg.org/）

  • Identity Streams

• 抛出 SPA 不如 Server Rendering 快的问题。

• Service Worker + Streams 能够改善，但仍是不能作到 SPA 比 Server Render 快并用 github 举了例子。

• 然而，PWA != SPA

• Navigation preload

• Forigen Fetch

• Background Fetch

• Navigation transitions

Progressive Performance

点击 这里 观看视频。

此次 Alex 并无直接说 PWA 的话题，而是为咱们带来了移动端性能方面的分享，指出了如今移动端性能低下，要注重在恶劣环境下（网络差，设备低电量等）还保持一个好的用户体验。

• Mobile website 愈来愈重要

• 在 PC 开发环境下看起来性能还不错的网站，在手机上其实并不尽人意

• 若是你的页面在 3 秒钟加载不出来的话，有 53% 的用户会选择离开

• 而报告中表示手机网页打开的平均时间在 19s

• Motion Mark 测试，PC 要比手机端快 25 倍

• 要用真机 Debug

• 要重视低端设备

• Power = Heat，硬件限制以致于手机不能比 PC 快

• High Performance Browser Networking

• 少加载 code，在合适的时间执行合适的代码

• Service Worker 不只仅是离线，更重要的是提高效率

The “Progressive” in Progressive Web Apps

点击 这里 观看视频。

Patrick Kettner 是来自微软 Edge 的 PM，他演讲的主线是他儿子顺便介绍了一下 PWA，但因而可知微软支持 PWA 只是迟早的事情。

• 2g 网络毁了他的生活

• 回顾了一下 App Cache

• 提供了一种新的 开发方式

• PWA 在 Edge 上

• WebWorkerPreProcessor

What Comes Next for the Web?

点击 这里 观看视频。

Paul 主要分享了关于 Web 将来的发展方向，包括 WebVR，性能提高等等。

• Web 必定会赶超 Native APIs

• 手机游戏会与 Native 分庭抗礼，并带来更高的利润

• 现有 API

  • 定位（Geolocation）

  • 相机（Camera）

  • 麦克风（Microphone）

  • 电池（Battery）

  • 权限（Permissions）

  • 网络情况（Network）

  • 自动填充（Autofill）

  • 用户受权（Credential Management API）

  • 支付（PaymentRequest API）

  • 消息推送（Push notifications）

  • 离线（Offline）

  • 可安装（Installability）

• SLICE（Secure，Linkable，Indexable，Composable，Ephemeral）

• 计划：

  • 已经实现的

    • position: sticky，Intersection Observer, Web Componensts, PointerEvents

    • PWA：App drawer，system UI.

    • PWA ACTION_VIEW

    • 从消息启动应用

    • 名称和图片可更新（manifest.json）

    • manifest.json 添加 scope 属性

    • chrome://flags/ 启用这些功能

  • 将会实现

    • Doing Science On The Web

    • https://github.com/jpchase/origintrials

    • Web Share API

    • Media improvements（多设备之间）

    • Background playback（好比锁屏后的音乐）

    • canvas.captureStream() + Web RTC

    • canvas.captureStream() + MediaRecorder.

    • ImageCaputre API.

    • FaceDetector API.

    • Generic Sensor API.

    • AmbientLightSensor API.

    • Fused Sensors

  • 新的交互方式

    • Physical Web.

    • Web Bluetooth.

    • WebUSB.

    • WebVR.

观后感

这周末在家宅两天来看会议视频其实仍是值得的，有了很多收获。此次大会几乎全部人的演讲都会提到 PWA，PWA 是 Chrome 团队近两年来全力推广，安卓系统也提供全方位的支持，PWA 必将会是将来 Web 发展中很是重要的一步。同时 PWA 也涵盖了不少新技术，Service Worker，Streams，Cache，用户受权还有大会中提到的相机，支付等等原生 API ，因此看来前端之路，路漫漫其修远兮。