2017上海Google谷歌开发者大会第二天

扫描二维码

12月14日一早就看到窗外的地面湿漉漉的,应该是小雨过后。天气有些转凉,第一反应就是这天气预报不太准啊。也好,感受下雨后的上海。

开发者大会第一天的内容详见:2017上海Google谷歌开发者大会第一天

今天的演讲的主题没有昨天那么多,更多的是深入介绍技术层面的知识,所以对于想深入了解技术细节的同学来说,今天的内容会比较干货一些。主要还是深入介绍了如下内容:Android Oreo、TensorFlow、PWA、AMP、Android Things、ARCore、Google Cloud Platform。鉴于兴趣原因,我选择性的听了其中一些,主要是偏Web方面:

  • PWA框架和工具
  • 什么是网络未来的潮流?
  • ARCore

PWA框架和工具

PWA的核心技术是Service Worker, 其生命周期如下,了解了这个过程就知道了PWA的文件是怎么做到更新的:

Chrome 60提供了更完善的调试工具

JavaScript库Workbox

更好的管理浏览器的本地缓存文件,做到离线缓存、离线分析、后台自动同步。支持webapck, Gulp, npm3种安装方式

google developer: https://developers.google.com/web/tools/workbox/
github: https://github.com/GoogleChrome/workbok

pinterest/service-workers
Pinterest开源的用于创建/测试/体验的工具集合。有代码生成,Service Worker模拟环境生成器。

github: https://github.com/pinterest/service-workers

sw-precache和sw-toolbox
用于构建Service Worker的实用程序和工具,其目标和价值与Workbox相同;模块化、灵活性和可扩展性较低;被当今许多CLI和工具采用

sw-precache: https://github.com/GoogleChromeLabs/sw-precache
sw-toolbox: https://github.com/GoogleChromeLabs/sw-toolbox

create-ract-app
Service Worker和网络应用清单生成;缓存优先策略

https://github.com/facebookincubator/create-react-app

preact-cli
可以创建应用;index.html App Shell生成;自动为浏览器列表添加前缀;针对服务器推送的Firebase配置;由sw-precache驱动。

https://github.com/developit/preact-cli

polymer-cli
清单生成和可选的Service Worker;三种发行版本:es5-bundled、es6-bundled、es6unbundled;PRPL模式

https://github.com/Polymer/polymer-cli

vue-cli和vuejs-templates/pwa
应用的创建;清单、Service Worker和App Shell生成;智能加载所需的JavaScript、CSS和网页字体

vue-cli: https://github.com/vuejs/vue-cli
vuejs-templates/pwa: https://github.com/vuejs-templates/pwa

anular/cli
应用创建;Service Worker生成;声明的基于json的配置;推送通知声明周期事件

https://github.com/angular/angular-cli

其它重要项目

端对端的Service Worker测试
考虑测试Service Worker的状态可能很重要

http://bit.ly/angular-pwa-harness

什么是网络未来的潮流?

Web Share API
打开原生分享对话框, 在Chrome 61 for Android版本已经支持

https://developers.google.com/web/updates/2016/09/navigator-share

网络推送通知

从Chrome 59版本,通过Notifications API发送的网络推送通知直接在macOS原生通知中心内显示。更好地实现与平台的集成,遵循macOS系统勿扰模式设置的规则。

https://developers.google.com/web/updates/2017/04/native-mac-os-notifications

Service Worker导航预加载
导航预加载是一项全新的试验性功能,利用这项功能,可以实现:用户发出GET导航请求时,系统在Service Worker启动的同时启动网络请求。虽然这不能避免启动延迟,但却可以消除网络请求受阻的现象,从而让用户能够更快获取内容。

一键注册API

在所有浏览器上都有效。在移动网络上创建账号有新方法了,只需点按一下即可基于OpenYOLO, 使用Google电子邮件地址创建账号。支持使用之前选择的信息实现回访用户自动登录,从而立竿见影地进行个性化。

https://developers.google.com/identity/one-tap/web/

存储空间估测
开发者经常遇到这个问题:存储空间是否足够支持我执行目前的操作?现在,这个问题已经得到解决。从Chrome 61版本开始支持。

https://developers.google.com/web/updates/2017/08/estimating-available-storage-space

Image Capture API
更改相机设置。Image Capture API可以捕捉静止图像,以及配置缩放级别等相机硬件设置。从Chrome 59开始支持。

示例:https://googlechrome.github.io/samples/image-capture/update-camera-zoom.html
文档:https://developers.google.com/web/updates/2016/12/imagecapture

Shape Detection API
让手机摄像头的智能程度登峰造极。利用Shape Detection API,可以检测面孔、读取条形码, 以及运行光学字符识别技术(OCR)

https://wicg.github.io/shape-detection-api/
https://arnellebalane.com/shape-detection-api/

Media Session API

向用户显示媒体元数据信息。对媒体通知进行自定义。也可以利用此API处理与媒体相关的事件,例如定位播放位置或者更改轨道。

https://developers.google.com/web/updates/2017/02/media-session

WebVR
在浏览器中营造引人入胜的虚拟现实体验。WebVR是一种开放标准,让用户能够在你的浏览器中获得虚拟现实体验。
WebVR的目标是,让所有人,无论使用什么设备,都能更轻松地享受虚拟现实体验。

Navigation Timing API
获取总体性能数据。

Paint Timing API
了解网站在向真实用户呈现内容时的渲染速度。

Client Hints
根据用户设备调整体验。低内存设备(内存低于512MB的设备和内存在512MB到1GB之间的设备)在新兴市场中的应用非常广泛。根据Chrome的遥测数据,此类设备发生的内存不足崩溃事件的数量非常庞大。
提供精简版网页不仅能够改善用户体验,甚至对于确保网页的可用性也是非常必要的举措。

服务器可以通过使用Accept-CH响应标头或者通过包含http-equiv属性的等效元标记来通告对Client Hints的支持:
Accept-CH = Device-Memory

网站也可以通过JavaScript APIs读取这些信息并进行相应的调整。

动态模块导入
延迟加载JavaScript代码。利用这个新功能,可以在运行时动态加载代码。可用于仅在需要时延迟加载脚本,从而提升应用的性能。

button.addEventListener(‘click’, event => {
import(‘./dialogBox.js’)
.then(dialogBox => dialogBox.open());
.catch(error => / Error handling /)
})

异步生成器函数
简化流式传输数据的消耗或实现。异步迭代器可用于for-of循环以及通过异步迭代器工厂创建自定义异步迭代器。

Promise 中的Finally方法
确保系统无论在什么情况下都执行你需要的操作。Finally方法现在可以在Promise实例中使用,并且可以在Promise被实现或者拒绝后调用。

Web Bluetooth
与附近的蓝牙设备安全通信。利用Web Bluetooth API, 网站能够通过Generic Attribute Profile(GATT)服务发现附近的蓝牙设备并与这些设备通信。
目前,该API已经在Chrome中得到了部分实现,涉及的系统包括Android M+、Linux、macOS和Chrome OS。

https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web

WebUSB

专为网络设备设计的访问控制。在网络上使用的设备要经过专门设计,这并不是要公开所有USB设备。仅限HTTPS, 必须由用户启动。已在Chrome中得到了实现,涉及的系统包括Android M+、Linux、macOS和Chrome OS。

https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web

更多新内容

最新消息:https://developers.google.com/web/updates/

ARCore

2017年 8 月,Google 推出了名为 ARCore 的新项目,也开始走起了更为大众化的、基于软件层面的 AR 应用开发之路。
这个 ARCore 平台,将专门针对 Android 开发者提供 SDK,帮助他们用纯软件层面的方式来开发移动端的 AR 应用。此前,他们曾把 ARCore 应用在 Google Pixel 和三星 Galaxy S8 上面;这一次,他们又发布了第二款开发者预览版 ARCore,添加了很多的新的特性。
对 Google 而言,押宝 ARCore,将成为他们接下来 AR 发展计划中的重点.

Google 官方宣布,将从 2018 年 3 月 1 日起停止对旗下 AR 平台 Tango 的技术支持,专注于另一个 AR 项目——面向 Android 设备应用程序开发的 ARCore。

开发环境:https://developers.google.cn/ar/

以上就是我想介绍的技术主要内容。

另外去展台逛了逛,也收获不少,展台的人会非常热情的跟你沟通,邀请你参与体验。尤其是Chrome展台,和技术人员沟通了Lighthouse的使用,我也给他介绍了我们公司做的产品,并互相加了微信,也算是额外的收获。还领了小奖品,

结束了开发者大会,和同事去外滩转了下,感受到了上海大都市的气氛,夜晚灯光璀璨,别有一番景致。