谷歌已经在 2021 年 5 月 25 日发布了 Chrome 91
正式版。以下是作为一名 Web
开发者需要了解的一些更新:
- 安全相关
- 支持不同域名共享登录凭证
Linux
上支持基于HTTPS
的DNS
HTTP
端口10080
被默认阻止,以减轻NAT Slipstream 2.0
攻击- 如果权限策略启用,如果通过权限策略启用,则
Android
上支持跨域iframe
的WebOTP API
。支持JSON
模块 WebTransport
协议框架支持 “使受 Web 安全模型约束的客户端能够使用安全的多路传输与远程服务器进行通信”
- 新特性支持
- 支持从剪贴板读取文件
- 文件访问 API 支持设置建议文件名、起始目录
- 默认情况下启用
GravitySensor API
WebAssembly SIMD
完成试用版本,默认开启
共享登录凭证
为了用户的隐私安全,三方 Cookie 正慢慢被浏览器弃用,但是我们程序中一些非常重要的功能仍然需要借助 三方Cookie
, 例如单点登录。
如果你的站点有多个子网站,然后你希望用户只登录其中一个网站就可以默认登录所有网站,在以前我们会借助一个第三方登录域名的 Cookie
来存储所有网站的登录态,本次 Chrome
新推出的登录凭证共享方案,应该可以让我们在这个场景下脱离 三方Cookie
了。
在这个方案中,你可以通过创建一个 Digital Asset Links (DALs)
文件来将你的不同域名进行关联,用户的登录信息可以在任何关联的网站中进行共享。例如,你想创建 www.conardli.com
和 www.conardli.dev
两个域名的关联,可以创建一个 assetlinks.json
:
[{
"relation": ["delegate_permission/common.get_login_creds"],
"target": {
"namespace": "web",
"site": "https://www.conardli.com"
}
},
{
"relation": ["delegate_permission/common.get_login_creds"],
"target": {
"namespace": "web",
"site": "https://www.conardli.dev"
}
}]
relation
字段是一个字符串数组,描述了站点之间的关系,想要让站点共享登录凭证,可以指定字符串delegate_permission/common.get_login_creds
。target
字段是一个对象,用于指定声明所适用的资产- namespace: 必须 web 用于网站
Digital Asset Links JSON
文件需要托管在登录域的以下位置:
https://domain[:optional_port]/.well-known/assetlinks.json
例如在上面的例子中,JSON 文件应托同时被托管在下面的位置:
https://www.conardli.com/.well-known/assetlinks.json
https://www.conardli.dev/.well-known/assetlinks.json
如果你的网站有
robots.txt
文件,则必须允许Googlebot
代理检索/.well-known/assetlinks.json
。
使用上面的方案需要你的网站支持下面的条件:
- 使用
Chrome 91
或更高版本。 - 启用选项
chrome://flags#filling-across-affiliated-websites
- 已在
chrome://settings/passwords
中打开Offer to save passwords
选项 - 确保你的网站的登录域可通过
HTTPS
访问。
支持基于剪贴板的文件上传
还有另一个很酷的新 API
,现在你可以在 Chrome 91
中实现复制粘贴上传文件了。Chrome 现在支持在 paste
事件中直接读取到文件了。
window.addEventListener('paste', onPaste);
async function onPaste(e) {
const file = e.clipboardData.files[0];
const contents = await file.text();
...
}
当然,Safari 在 2018 年就支持了这个功能...
文件访问 API 支持设置建议文件名、起始目录
在用户授予文件交互权限后,我们的网站就可以与像一个桌面客户端一样和用户本地文件进行交互了,从而给用户更自然的用户体验。
从 Chrome 91
开始,你现在可以建议要与之交互的文件或目录的名称和位置。可以设置给 showSaveFilePicker
函数增加一个 suggestedName
属性:
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'
});
了解更多:web.dev/file-system…
基于媒体查询定制图标
你可以在 link rel="icon"
的元素上使用 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">
WebAssembly SIMD 正式支持
WebAssembly SIMD
原始版本试用版在 Chrome 84
版本开始进行实验,在 Chrome 91
版本正式启用支持。
SIMD(Single Instruction Multiple Data
)即单指令流多数据流,是一种采用一个控制器来控制多个处理器,同时对一组数据中的每一个分别执行相同的操作从而实现空间上的并行性的技术。简单来说就是一个指令能够同时处理多个数据。
WebAssembly SIMD
提议的最终目标是将向量运算引入 WebAssembly
规范中,这可以大大加速音频/视频编解码、图像处理应用程序、密码应用程序等高级计算应用程序。虽然还在实验阶段,现在已经被开源程序广泛使用了(如 Halide
、OpenCV.js
、XNNPACK
)都支持 WebAssembly SIMD
。
抖音前端急缺人才,如果你有意向加入我们,或有其他事情想和我交流,欢迎加我的个人微信 ConardLi 。