上周末，谷歌浏览器官方博客宣布发布Chrome 89 Beta版本，该版本带来一系列的新鲜功能，请和虫虫一起尝鲜学习下。

WebHID API

Chrome 89 Beta版本中最引人注目的功能之一WebHID API，用来解决人机接口设备（HID）现实应用的问题。WebHID API通过提供一种通过JavaScript实现特定于设备的逻辑的方法来解决此问题。

人机接口设备是一种供人获取输入或向人提供输出的设备。常见的人机接口设备包括键盘，鼠标，触摸屏等指示设备以及游戏板。

在浏览器中访问这些罕见或异常的HID设备是一种很费劲的事情。比如，要在Web游戏中使用游戏手柄。由于游戏手柄的输入和输出标准化程度不高，Web浏览器通常需要针对特定​设备的自定义逻辑。由于没有一种可持续的定向支持，使得对于较旧或者不常见的设备不能给予支持。

一个WebHID的连接Joy-Con设备实例代码：

device.addEventListener("inputreport", event => {
const { data, device, reportId } = event;
// Handle only the Joy-Con Right device and a specific report ID.
if (device.productId !== 0x2007 && reportId !== 0x3f) return;
const value = data.getUint8(0);
if (value === 0) return;
const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
console.log(`User pressed button ${someButtons[value]}.`);
});

WEB NFC

NFC很多人可能都熟悉，并且日常都在使用，比如刷用手机公交卡，刷门禁等。

Web NFC可以允许Web应用程序读写NFC标签。这样可以对Web使用提供很大便捷，比如仓储管理，物流供应链追溯等，通过网站就可以使用而无需专门的APP。Chrome 89中将默认启用Web NFC。

使用WEB NFC，读写操作非常简单。只需要一些指令来构造和解释有效载荷：

将字符串写入NFC标签：

if ("NDEFReader" in window) {
const ndef = new NDEFReader();
await ndef.write("Hello world!");
}

扫描来自NFC标签的消息：

if ("NDEFReader" in window) {
const ndef = new NDEFReader();
await ndef.scan();
ndef.onreading = ({ message }) => {
console.log(`Records read from a NFC tag: ${message.records.length}`);
};
}

一个完整的例子：

scanButton.addEventListener("click", async () => {
log("User clicked scan button");
try {
const ndef = new NDEFReader();
await ndef.scan();
log("> Scan started");
ndef.addEventListener("readingerror", () => {
log("Argh! Cannot read data from the NFC tag. Try another one?");
});
ndef.addEventListener("reading", ({ message, serialNumber }) => {
log(`> Serial Number: ${serialNumber}`);
log(`> Records: (${message.records.length})`);
});
} catch (error) {
log("Argh! " + error);
}
});
writeButton.addEventListener("click", async () => {
log("User clicked write button");
try {
const ndef = new NDEFReader();
await ndef.write("Hello world!");
log("> Message written");
} catch (error) {
log("Argh! " + error);
}
});

Web串行API

串行端口是双向通信接口，允许逐字节发送和接收数据。Web串口API将是网站可以和串行设备通讯，可以在浏览器上控制诸如微控制器和3D打印机之类的设备。

目前在教学演示，业余爱好者和特定工业环境中，用Web控制外围设备已经不是什么新鲜事，但是这些实例中，都需要安装硬件适配器和驱动程序，比如ActiveX空间等。

Web串行API则会让这一切都变得简单和标准化，改善开发和用户的体验。

桌面上Web共享

为了使用户能够轻松地在社交网络上共享内容，开发人员已将共享按钮手动集成到每个社交网站中。除了页面大小过大和第三方代码带来的安全风险外，这实际上也无法与真正使用的服务共享。在接收端，只有平台应用可以注册共享目标并从其他应用接收共享。

Chrome浏览器（Android版）开始在Chrome 61和75之间添加了这些功能功能。在Chrome 89中，Windows和ChromeOS上也可以使用Web共享，ChromeOS支持注册为共享目标。在这些平台上，站点可以使用navigator.share()在桌面上弹出一个触​共享对话框。Web应用程序清单的接口允许PWA充当为共享目标。

if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'web.dev',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}

其他功能

AVIF图像解码

新版本的Chrome支持使用Android和WebView上的AV1解码器本地解码AVIF内容。（在Chrome 85中添加了对桌面的支持。）

跨域开启者政策报告API

新增加的报告API可帮助开发人员部署跨域开放者政策。除了在强制执行COOP时报告损坏之外，API还为COOP提供了仅报告模式。COOP的仅报告模式不会强制执行COOP，但会报告如果我们强制执行COOP可能发生的潜在损坏。开发人员可以使用Chrome DevTools检查报告API。

在网络应用清单中显示替代

display_overrideWeb应用程序清单的新 字段允许开发人员为该display字段指定一个显式的后备链。

流API：字节流

流API提供了无处不在的，可互操作的原语，用于创建，组合和使用数据流。对于表示字节的流，Chrome现在支持可读流的扩展版本，以有效地处理字节，特别是通过最小化副本。

字节流允许获取自己的缓冲区（BYOB）读取器。默认实现可以提供一系列不同的输出，例如Web套接字的字符串或数组缓冲区，而字节流则保证字节输出。

支持SVG元素上的完整“过滤器”属性语法

Chrome现在允许将该'filter'属性的完整语法用于以前仅支持单个url()引用的SVG元素。这使过滤器的功能，例如blur()，sepia()和grayscale()同时适用于SVG元素和非SVG元素。它使平台支持'filter'更加统一，并允许更轻松地应用某些“罐头”效果。

WebAuthentication API

Chrome现在支持与Web身份验证API相关的两项新功能：AuthenticatorSelectionCriteria.residentKey和credProps。前者指定Web身份验证凭据注册是否应创建客户端可发现凭据。credProps扩展名向依赖部分创建的凭据是否可在客户端发现。

客户端可发现凭据（client-side discoverable credentials）是一种WebAuthn凭据，依赖方对它质疑时候，可以无需WebAuthn API请求中提供凭据ID。浏览器显示来自给定验证器（外部安全密钥或内置验证器）的所有可发现凭据的列表，并允许用户选择一个凭据进行登录。

CSS和JavaScript

:: target-text伪元素

添加突出显示伪元素，以允许作者以与默认用户代理突出显示不同的方式设置scroll-to-text片段的样式。

flow-relative圆角属性

现在，flow-relative的圆角舍入属性允许使用逻辑映射来控制拐角。这样，开发者可以根据页面的方向和书写方式设置不同的角边框半径，更加符合CSS逻辑属性和值规范。本次新添加了以下逻辑属性：

border-start-start-radius
border-start-end-radius
border-end-start-radius
border-end-end-radius

强制颜色属性

forced-colors媒体特征检测用户代理是否执行页面上的用户选择的有限调色板。

强制颜色调整属性

forced-color-adjust属性允许作者从强制颜色模式中选择特定元素，从而将对颜色的完全控制恢复到CSS。

顶级await

新版本的Chrome中引入了JavaScript V8引擎8.9版本，包括新功能有：

Chrome 89中允许await在JavaScript模块中将关键字放在顶层。这样可以将异步调用更加无缝地集成到模块加载过程中。目前，该功能只能通过将模块包装在异步函数中来实现的，增加了模块实现的复杂性，并使得模块可以获取任何实现细节。

开发者须知

使用EXIF的图像方向

新版本中将EXIF将信息用于定向跨原点图像。即image-orientation: none 的CSS中的设置对非安全来源的图像无效。

新版本的Chrome还移除一些功能

删除的前缀事件

传统前缀事件（webkitprerenderstart，webkitprerenderstop，webkitprerenderload和webkitprerenderdomcontentloaded）出动 现在从Chrome中删除。

停止克隆使用noopener打开的Windows的sessionStorage

当使用noopener打开窗口时，Chrome将不再克隆sessionStorage打开器。相反，它将启动一个空的sessionStorage名称空间。这使Chrome符合HTML规范。