关于chrome:了不起的Chrome浏览器Chrome-89开启Web应用的物联网时代

51次阅读

共计 5174 个字符，预计需要花费 13 分钟才能阅读完成。

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。

正文完
chrome
发表至： chrome
2021-03-15
 0
关于chrome:介绍一个能避免-CORS-错误的-Chrome-扩展-Moesif-Origin-CORS-Changer
Chrome-8485-的三个不兼容更新CLodop-中招跨站-SSO-和-第三方-cookie-会是重灾区
关于chrome:国内直接使用chat-GPT最简单的方法
关于chrome:vue-css-deep穿透深度查询样式在chrome89-edge最新版本中无效问题