此页面由 Cloud Translation API 翻译。

Chrome 91 的新功能

Pete LePage

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

与文件交互的 Web 应用现在可以在使用 File System Access API 时提供文件名和目录建议。
您可以读取剪贴板中的文件。
如果您的网站有多个网域，并且这些网域共用同一个帐号管理后端，那么您可以将这些网域告知 Chrome，以便密码管理器推荐正确的凭据。
I/O 大会上发布的所有视频均可在 Chrome 开发者 YouTube 频道上观看！
还有许多更多内容。

我是 Pete LePage，在家工作和拍摄。接下来，我们将深入探讨一下 Chrome 91 为开发者提供了哪些新功能！

File System Access API 的建议名称

文件系统访问 API 是我今年从 Fugu 项目推出的一个最喜爱的 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 Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage