Chrome 86 的新功能

Pete LePage

Chrome 86 现已开始面向稳定版发布。

以下是您需要知晓的相关信息：

• File System Access API 现已发布稳定版。
• Web HID 和 Multi-screen Window Placement API 推出了新的源试用计划。
• CSS 中有一些新内容，还有更多内容。

我是 Pete LePage，在家办公和录制视频。我们来深入了解一下 Chrome 86 中面向开发者的新功能吧！

文件系统访问

目前，您可以使用 <input type="file"> 元素从磁盘读取文件。如需保存更改，请将 download 添加到锚点标记，系统会显示文件选择器，然后保存文件。无法写入您打开的同一文件。这种工作流很烦人。

File System Access API（以前称为 Native File System API）已从原始试用阶段过渡为稳定版，您可以调用 showOpenFilePicker() 来显示文件选择器，然后返回可用于读取文件的文件句柄。

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

如需将文件保存到磁盘，您可以使用之前获取的文件句柄，也可以调用 showSaveFilePicker() 来获取新的文件句柄。

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

向用户提示请求写入文件的权限。

在写入之前，Chrome 会检查用户是否已授予写入权限；如果未授予写入权限，Chrome 会先提示用户。

调用 showDirectoryPicker() 会打开一个目录，以便您获取文件列表或在该目录中创建新文件。非常适合与大量文件交互的 IDE 或媒体播放器等应用。当然，在您可以写入任何内容之前，用户必须授予写入权限。

该 API 还有许多其他功能，因此请参阅 web.dev 上的“文件系统访问”一文。

源试用：WebHID

游戏控制器。

人机接口设备（通常称为 HID）从人类接收输入或向人类提供输出。有许多人机接口设备太新、太旧或太不常见，系统的设备驱动程序无法访问它们。

WebHID API 现已作为来源试用版提供，可通过提供一种在 JavaScript 中访问这些设备的方式来解决此问题。借助 WebHID，基于网络的游戏可以充分利用游戏手柄，包括所有按钮、操纵杆、传感器、触发器、LED、重音包等。

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

基于网络的视频聊天应用可以使用专用音响设备上的电话按钮来发起或结束通话、将音频静音等。

HID 设备选择器。

当然，只有在用户明确选择允许的情况下，此类强大的 API 才能与设备交互。

请参阅连接到不常见的 HID 设备，了解更多详情、示例、使用入门和精彩演示。

源试用：Multi-Screen Window Placement API

目前，您可以通过调用 window.screen() 来获取浏览器窗口所在屏幕的属性。但是，如果您使用的是多显示器设置，该怎么办？抱歉，浏览器只会告知您它当前所在的屏幕。

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Multi-Screen Window Placement API 在 Chrome 86 中启动了源代码试用版，可让您枚举连接到计算机的屏幕，并在特定屏幕上放置窗口。对于演示文稿应用、金融服务应用等，能够在特定屏幕上放置窗口至关重要。

您需要先申请权限，然后才能使用该 API。如果您不这样做，浏览器会在用户首次尝试使用该功能时提示用户。

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

在用户授予权限后，调用 window.getScreens() 会返回一个 promise，该 promise 会解析为 Screen 对象的数组。

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

然后，我可以在调用 requestFullScreen() 或放置新窗口时使用这些信息。Tom 在 web.dev 上的使用 Multi-Screen Window Placement API 管理多个显示屏一文中介绍了所有详细信息。

等等

借助新的 CSS 选择器 :focus-visible，您可以选择启用浏览器在决定是否显示默认焦点指示器时所用的启发词语。

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

您可以使用 CSS ::marker 伪元素自定义列表的编号或项目符号的颜色、大小或类型。

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Chrome 开发者峰会即将在您附近的屏幕上播出，敬请关注我们的 YouTube 频道，了解更多信息！

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 86 中的其他变更，请访问以下链接。

• Chrome DevTools (86) 中的新变化
• Chrome 86 弃用和移除的功能
• 针对 Chrome 86 的 ChromeStatus.com 更新
• Chrome 86 中的 JavaScript 新变化
• Chromium 源代码库更改列表

订阅

如果您想随时了解我们的视频，请订阅我们的 Chrome 开发者 YouTube 频道，这样，每当我们发布新视频或将 RSS Feed 添加到您的 Feed 阅读器时，您都会收到电子邮件通知。

我叫 Pete LePage，一旦 Chrome 87 发布，我就会在这里向大家介绍 Chrome 中的新变化！