以下是您需要知晓的相关信息:
- 借助内置于浏览器中的
URLPattern
,路由变得更加简单。 - Eye Dropper API 提供了用于选择颜色的内置工具。
- 我们推出了新的来源试用计划,您现在可以选择接收经过缩减的 UA 字符串。
- PWA 峰会视频已全部上线。
- 还有许多其他功能。
我是 Pete LePage,目前在家办公和录制视频。我们来深入了解一下 Chrome 95 中面向开发者的新功能。
使用 URLPattern
进行路由
几乎所有 Web 应用都以某种方式依赖于路由,无论是在将路径映射到磁盘上的文件的服务器上运行的代码,还是在网址发生更改时更新 DOM 的单页应用中的逻辑。URLPattern
是一个新的 Web 平台 API,用于对路由模式语法进行标准化。
它基于现有框架构建,可让您更轻松地执行常见的路由任务。例如,与完整网址或网址路径进行匹配,然后返回有关令牌和组匹配的信息。
如果您已经熟悉 Express、Ruby on Rails 或 path-to-regexp 中使用的路由语法,那么这可能看起来很熟悉。
如需使用它,请创建一个新的 URLPattern()
,并提供要与模式匹配的详细信息。模式可以包含通配符、命名标记组、正则表达式组和组修饰符。
const p = new URLPattern({
protocol: 'https',
hostname: 'example.com',
pathname: '/:folder/*/:fileName.jpg',
search: '*',
hash: '*',
});
例如,我们来看看 Google 文档可能会使用的 URLPattern
。我们将指定文件的 kind
、文件 ID
以及打开该文件时使用的 mode
。
然后,如需使用该模式,我们可以调用 test()
或 exec()
。
const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';
const pattern = new URLPattern({
pathname: '/:kind/d/:fileID/:mode',
hash: '*',
});
const r = pattern.exec(url);
// {
// "pathname": {"groups": {
// "fileID": "1s...5c",
// "kind": "document",
// "mode": "edit"
// }, ...},
// "hash": {"groups": {"0":"heading=h.8...c"}, ...},
// ...
// }
Chrome 和 Edge 95 及更高版本中默认启用 URLPattern
。
对于尚不支持该功能的浏览器或环境(例如 Node),您可以使用 urlpattern-polyfill 库。
如需了解完整详情,请参阅 Jeff 的文章 网址Pattern 为 Web 平台引入了路由!
使用 Eye Dropper API 选择颜色
我用过的几乎所有设计应用都带有滴管工具,可让您轻松确定某个对象的颜色。某些浏览器在 <input type=color>
中内置了滴管功能,但效果并不理想。
由 Microsoft 的部分人员实现的滴管 API 将此功能引入了 Web 领域。如需使用它,请创建一个新的 EyeDropper()
实例,然后对其调用 open()
。
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
与许多其他现代 Web API 一样,它以异步方式运行,因此不会阻塞主线程。当用户点击所需的颜色时,系统会解析为用户点击的颜色。
PWA 峰会
您是否观看了本月早些时候的 PWA 峰会?
很高兴看到有这么多人谈论 PWA 并分享他们的体验。如果您错过了大会,请访问 PWASummit.org 或 PWA Summit YouTube 频道,观看所有视频。
用户代理缩减源试用
用户代理缩减功能可减少用户代理字符串中的信息,使其仅包含浏览器的品牌和重要版本、浏览器的桌面或移动设备区别以及运行它的平台,从而减少被动指纹表面。
从 Chrome 95 开始,我们推出了新的源试用,您现在可以选择接收经过缩减的 UA 字符串。这样,您就可以在缩减后的 UA 成为 Chrome 中的默认行为之前发现和解决问题。
这些更改将在多个版本中逐步应用,但您现在就可以准备和测试所需的一切。
如需了解所有详细信息和时间安排,请参阅 developer.chrome.com 上的用户代理缩短来源测试一文。
等等!
当然,还有许多其他功能。
- 如果您一直在关注 Storage Foundation API 的工作,请注意,我们推出了新的访问权限标识符源代码试用版。
- WebAssembly 现在提供异常处理支持,让代码可在抛出异常后打破控制流。
- Chrome 100 将于明年发布。这意味着,您需要确保自己的代码可以处理超过 2 位数的值!
深入阅读
本文仅介绍了一些主要亮点。如需了解 Chrome 95 中的其他变更,请点击以下链接。
- Chrome 开发者工具的新变化 (95)
- Chrome 95 弃用和移除的功能
- ChromeStatus.com 上有关 Chrome 95 的最新动态
- Chrome 95 中的 JavaScript 新变化
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需及时了解最新动态,请订阅 Chrome 开发者 YouTube 频道,这样每当我们发布新视频时,您就会收到电子邮件通知。
我是 Pete LePage,Chrome 96 发布后,我会立即为您介绍 Chrome 中的新变化!