11月13, 2016

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

原文:http://www.zhengqingxin.com/post/cds.html

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 ,所以看来前端之路,路漫漫其修远兮。

本文链接:http://www.75team.com/post/cds

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。