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），该 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);
});
基于网络的视频聊天应用可以使用专用音响设备上的电话按钮来发起或结束通话、将音频静音等。
当然，这样强大的 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() 将返回一个使用 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() 或放置新窗口时使用这些信息。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 开发者工具的新变化 (86)
- Chrome 86 弃用和下架
- 针对 Chrome 86 的 ChromeStatus.com 更新
- Chrome 86 中的 JavaScript 的新变化
- Chromium 源代码库更改列表
订阅
如果您想随时了解我们视频的最新动态，不妨订阅我们的 Chrome 开发者 YouTube 频道，这样，每当我们发布新视频或将 RSS Feed 添加到您的 Feed 阅读器时，您都会收到电子邮件通知。
我叫 Pete LePage，一旦 Chrome 87 发布，我会立即 向大家介绍 Chrome 中的新变化！