Chrome 91 的新功能

Pete LePage

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

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

File System Access API 的建议名称

今年，我最喜欢的 Fugu 项目 API 之一是文件系统访问 API。用户授予权限后，应用便可与用户本地设备上的文件进行交互，就像其他已安装的应用一样，从而让您能够打造更自然的用户体验。

从 Chrome 91 开始，您现在可以建议要与之互动的文件或目录的名称和位置。为此，请将 suggestedName 属性作为 showSaveFilePicker 选项的一部分传递。

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

默认的起始目录也是如此。例如，文本编辑器可能希望在 documents 文件夹中启动文件保存或文件打开对话框。而图片编辑器可能希望从 pictures 文件夹开始。您可以通过传递 startIn 属性来建议默认的起始目录。

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

如需了解完整详情，请参阅 Tom 的文件系统访问一文。

从剪贴板读取文件

Chrome 91 中还有一个用于与文件交互的其他很酷的新 API。在桌面设备上，Web 应用现在可以从剪贴板读取文件。（从剪贴板读取文件的功能自 2018 年起已在 Safari 中提供。）

当然，您无法获得对剪贴板的无限制访问权限，因此需要设置 paste 事件监听器。然后，您可以在事件处理脚本中访问剪贴板中每个文件的内容。

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

在关联的网站上共享凭据

如果您的网站有多个网域，并且它们共用相同的账号管理后端，您现在可以将这些网站相互关联，让用户只需保存一次凭据，Chrome 密码管理工具便会在用户访问任何关联网站时向其显示这些凭据。

如果您的网站是从不同的顶级网域（例如 google.com 和 google.ca）提供的，这种做法非常适合。或者，您可能有多个网域名称。

如需关联网站，您需要创建一个 assetlinks.json 文件来定义网域之间的关系。在下面的示例中，我会告知浏览器 .com 和 .co.uk 网域相关且可以共享凭据。

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

然后，将 assetlinks.json 文件托管在每个网域的 .well-known 文件夹中。

此功能将从 Chrome 91 开始逐步推出，可能不会在发布当天就推出，因此请参阅让 Chrome 在关联的网站之间共享登录凭据，了解最新详情。

等等！

当然，还有许多其他功能。

2021 年 I/O 大会的所有视频现已上线，其中包含一些精彩的内容，敬请观看！

Web Transport（以前称为 Quic Transport）已发生多项更改，并将开始新的源代码试用。

Web Assembly SIMD 已完成源代码试用，面向所有用户提供。

经过刷新的表单元素终于在 Android 上推出，从而提升了用户体验。

系统会为 link rel="icon" 使用 <link> 元素的 media 属性，这意味着您可以根据媒体查询定义不同的图标。例如，为深色模式和浅色模式提供不同的图标。

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

深入阅读

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

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 92 发布后，我会立即为您介绍 Chrome 中的新变化！