3月初刚公布的Chrome 89，带来了哪些有意思的新个性呢？

背景

十多年来，Web技术突飞猛进，这其中，Chrome功绩是最大的，能够说没有之一。对于这一点，我在之前的博客中曾经阐述过了：

  • JavaScript深入浅出第5课：Chrome是如何胜利的？
  • 第三方cookie马上就不让用了，互联网广告还怎么玩？

当初，Chrome曾经不只是一个简略的浏览器，而是一个决定Web技术倒退方向的平台型产品，它的位置也就仅次于Linux、iOS、Andirod和Windows吧。

重要的是，Chrome并没有停下翻新的脚步，始终在推动Web技术往前倒退。

始终以来，Chrome每隔 6 周公布一个新版本。最近，Chrome发表将会放慢这个公布流程，改为每 4 周公布一个新版本。

身处大前端这个畛域，理解Chrome的倒退能够帮忙咱们了解整个行业的发展趋势。

Chrome最值得关注的新个性有2个方向：

  • 新的能力，新的API，比方Web NFC这种，能够用在理论的利用场景中，带来业务上的翻新；
  • 平安及隐衷方面的规定批改，比方禁用第三方Cookie，会影响到业务的稳定性；

从这篇文章开始，我将以《了不起的Chrome浏览器》为题，对Chrome的每一个版本进行具体解读，分享一些本人兴许并不成熟的思考，欢送关注寒雁Talk公众号。

TL;TR

为了防止占用过多公共资源，我先简略总结一下吧:)

  • Chrome 89是哪天公布的？2021-03-02
  • 在哪能够查看Chrome的版本信息？Chrome Platform Status
  • Chrome 89更新了多少个个性？30个，具体有哪些个性能够查看Chrome Platform Status
  • Chrome 89最大的亮点是什么？、Web NFC、WebHID以及Web Serial API，这3个个性使得Web利用能够更加便捷地与硬件进行交互，JavaScript或成为物联网时代的最大赢家。

  • 我感兴趣的新个性顺次有哪些？

    • Top-level await
    • Web NFC
    • WebHID
    • Web Serial API
    • performance.measureUserAgentSpecificMemory()
  • 你感兴趣的新个性顺次有哪些？这个我就不晓得了啊，欢送留言评论！

这里，必须点赞Chrome Platform Status这个站点，它把Chrome每一个版本的每一个个性都整顿得十分分明。而我做的事件，无非是做个勤奋的搬运工就好了~

具体解读

30个新个性我无奈一一介绍，那我就挑5个还比拟有意思的个性来聊聊吧，对其余个性感兴趣的话，能够看看Chrome Platform Status。

Top-level await

作为一个JavaScript程序员，Async/Await是我最喜爱的个性之一，把我从Promise.then的天堂中解脱进去。爱屋及乌，Top-level await也很妙啊。

上面这个html，在Chrome 88上会报错："Uncaught SyntaxError: Unexpected reserved word"，在Chrome 89上则能够正确执行。这是因为Chrome 89的V8引擎降级到了V8.9，反对了Top-level await。

<!DOCTYPE html><head>  <title>Top-level await</title></head><body>  <script type="module">    await Promise.resolve(alert('hello, world!'));  </script></body>

以前，await只能在async函数中应用，当初毋庸async函数也能够应用了，能够利用在数据库连贯初始化等场景，更加不便：

const connection = await dbConnector();

值得注意的是，Top-level await只能在ES Module中应用。并且，应用Top-level await的话，会对ES Module的执行程序造成影响，阻塞应用了Top-level await的Module及其父节点（parent module）的执行。

Top-level await这个提案曾在社区中引起很大的争议，起初提案批改之后，不再阻塞兄弟节点（sibling module）的执行，当初顺利进入Stage 3，也是不容易啊。

Web NFC

NFC是Near Field Communication的缩写，中文名为"近场通信"，能够用在挪动领取、门禁等场景。

Chrome 89的Andriod版本默认开启了Web NFC，这为Web利用又拓展一大利用场景。

下图这个Demo还是很有意思的，手机凑近卡片就能通过NFC辨认卡片的色彩。

传说中不可能实现的需要：依据手机壳的色彩批改UI色彩，这不就实现了嘛，哈哈。

Chrome推动Web技术走向各个利用场景的致力，再下一城。NFC的应用场景大多都挺简略的，为了这个去开发原生利用仿佛有点杀鸡用牛刀，Web技术可能是更好的抉择。在领取、门禁、票务、地铁公交等须要刷卡的场景，Web利用都有了用武之地。

WebHID

HID的全称是Human Interface Devices，不太好翻译，看来Google的同学们造词能力也很厉害。HID其实就是各种各样的输入输出设备。很多设施因为太新、太旧、太少见或者不足规范，所以零碎很难应用，WebHID API使得这些设施能够更不便地与Web利用进行交互。

其实，HID次要指的就是游戏手柄，因为游戏手柄的标准化做的还不够好。

Demo中有点理论价值的也就PlayStation和Switch的案例，果然还是利好游戏宅...

大家能够感受一下，用Switch的Joy-Con手柄怎么玩Chrome的恐龙游戏，能够说十分魔性了....断网的时候大家又多了一个锻炼身体的新姿态...

以后，线下游戏厅外面的游戏界面都挺古老的，还停留在上个世纪，与线上游戏存在代际差距，亟待降级，如果采纳Web技术来开发，研发老本更低，兼容性更好，当初也能够不便地与游戏手柄进行交互了，应该是一个值得尝试的畛域。

Web Serial API

**
串行接口（Serial port），次要用于串行式逐位数据传输，打印机、单片机等设施都是通过串行端口与计算机连贯的。

串行设施（Serial device）能够通过串行接口、模仿串行接口的USB接口或者蓝牙连贯计算机。Web利用则能够通过Web Serial API与串行设施进行通信。

下图是BBC micro:bit，是用于教育场景的单片机，它有一个MicroUSB接口，能够连贯电脑。Google Developer codelab给的一个案例，就是应用Web Serial API在micro:bit上展现一个心形图像。

这几年少儿编程挺火的，让小朋友单纯地写代码其实挺无聊的，如果能联合相似于BBC micro:bit这样的硬件设施，让小朋友们看到真正的成果，哪怕是简略的LED灯管制，应该能够更好的激发小朋友们的趣味。而Web技术人造的低门槛、跨平台的个性，还挺适宜教育这个场景的。

performance.measureUserAgentSpecificMemory()

Chrome 89新增了performance.measureUserAgentSpecificMemory()接口，用于测量页面的内存使用量。

如果咱们间接在控制台执行performance.measureUserAgentSpecificMemory()，则很可能会报错：

Uncaught (in promise) DOMException: Failed to execute 'measureUserAgentSpecificMemory' on 'Performance': performance.measureUserAgentSpecificMemory requires cross-origin isolation.

这是因为performance.measureUserAgentSpecificMemory()只能在启用了cross-origin isolated的页面中执行，这样做是为了平安。

名字这么长的API还是头一次见，还不让人用，不讲武德啊...

为了测试，我写了个简略的Egg利用：

'use strict';const Controller = require('egg').Controller;class HomeController extends Controller {  async index() {    const { ctx } = this;    ctx.set('Cross-Origin-Embedder-Policy', 'require-corp');    ctx.set('Cross-Origin-Opener-Policy', 'same-origin');    ctx.body = 'hi, egg';  }}module.exports = HomeController;

Header中返回上面的值即可：

这时在控制台就能够执行performance.measureUserAgentSpecificMemory()了

await performance.measureUserAgentSpecificMemory();

performance.measureUserAgentSpecificMemory()是在浏览器执行垃圾回收的时候度量页面的内存使用量，

{    "breakdown": [        {            "attribution": [],            "bytes": 0,            "types": []        },        {            "attribution": [                {                    "scope": "Window",                    "url": "http://127.0.0.1:7001/"                }            ],            "bytes": 191222,            "types": []        },        {            "attribution": [],            "bytes": 786305,            "types": [                "Shared"            ]        }    ],    "bytes": 977527}

一个Hello World页面用了900KB内存，比尔盖茨哭晕在厕所外面...

总结

Chrome 89最大的亮点Web NFC、WebHID以及Web Serial API这3个个性，它们其实是在做同一件事件，让Web利用冲破页面自身，能够更加便捷地与硬件进行交互，JavaScript无望成为物联网时代的一等公民。

本文中介绍的Web NFC、WebHID以及Web Serial API的Demo案例都还有点意思，不过都稍显稚嫩，不过这也意味着这方面的利用还刚刚开始，将来的设想空间很是挺大的。文章中，我聊到了它们在领取、门禁、票务、交通、游戏以及教育方面的利用场景，应该还有更多值得大家摸索的场景，想想还是挺有意思呢。

WebHID以及Web Serial API有啥区别呢？对于这一点，我还没有钻研分明，感兴趣的同学能够关注一下我在GitHub提的issue：What are the differences between WebHID and Web Serial API？

Web NFC、WebHID以及Web Serial API都属于Chrome的capabilities project，其指标在于打消Web利用于原生利用之间的差距，让Web利用能够做任何iOS、Andriod以及桌面利用能够做的事件。这个指标看起来有些挑战性，然而也没有什么不可能的，10年前，你能设想Web利用能够倒退到明天这个水平吗？那10年后会怎么样呢？让咱们刮目相待吧！

欢送关注寒雁Talk公众号，关注《了不起的Chrome浏览器》系列博客，与我一起见证大前端的星辰大海！

参考

  • Top-level await
  • Top-level await is a footgun
  • JavaScript深入浅出第5课：Chrome是如何胜利的？
  • 第三方cookie马上就不让用了，互联网广告还怎么玩？
  • Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More
  • New in Chrome 89: Web Serial, HID, NFC, PWA installability changes, and more!
  • Getting started with the Web Serial API
  • What are the differences between WebHID and Web Serial API？
  • 2020 前端技术倒退回顾
  • Why you need "cross-origin isolated" for powerful features

招聘

阿里巴巴业务平台事业部长期招聘P6及以上前端大佬，参加建设最前沿的阿里前端生态系统，推动行业技术倒退，内推地址：hanyan.lk@alibaba-inc.com

欢送大家关注我的微信公众号寒雁Talk。