w3ctech

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
  • 抛出 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/ 启用这些功能
    • 将会实现
    • 新的交互方式
      • Physical Web.
      • Web Bluetooth.
      • WebUSB.
      • WebVR.

观后感

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

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复