Chrome 86 的新功能

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

以下是您有必要知道的信息:

我是 Pete LePage,在家工作和拍摄,下面就来深入了解一下 Chrome 86 为开发者提供了哪些新功能!

文件系统访问

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

借助 File System Access API(以前称为 Native File System API,该 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、Rumble 包等。

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 设备选择器
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,您可以枚举连接到计算机的屏幕,并将窗口放置在特定屏幕上。能够将窗口放置在特定屏幕上对于演示应用、金融服务应用等而言至关重要。

您需要先申请权限,然后才能使用该 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() 会返回一个使用 Screen 对象数组进行解析的 promise。

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() 或放置新窗口时使用这些信息。如需了解所有详情,请参阅 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 Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知,或者将 RSS Feed 添加到您的 Feed 阅读器中。

我叫 Pete LePage