以下是您有必要知道的信息:
- 与文件交互的 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 开发者工具的新变化 (91)
- Chrome 91 弃用和移除
- 针对 Chrome 91 的 ChromeStatus.com 更新
- Chrome 91 中的 JavaScript 的新变化
- Chromium 源代码库更改列表
订阅
如需及时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage