Chrome 95 的新变化

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

我是 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.orgPWA Summit YouTube 频道观看。

用户代理缩减源试用

用户代理缩减是一项计划,旨在通过将用户代理字符串中的信息缩减为仅包含浏览器品牌和重要版本、桌面设备或移动设备区分以及运行平台,来减少被动式数字“指纹”收集面。

从 Chrome 95 开始,我们推出了一项新的源试用,让您可以选择立即接收缩减后的 UA 字符串。这样一来,您就可以在 Chrome 中将缩减后的 UA 作为默认行为之前发现并修复问题。

这些变更将在多个版本中逐步应用,但您现在就可以开始准备和测试所需的一切。

所有详细信息和时间表均可在 developer.chrome.com 上发布的用户代理缩减源试用博文中找到。

以及更多!

当然,还有很多其他功能。

  • 如果您一直在关注 Storage Foundation API 的工作,那么现在有了一个新的访问句柄源试用版
  • WebAssembly 现在提供异常处理支持,让代码可在抛出异常后打破控制流。
  • Chrome 100 将于明年发布。这意味着,您需要确保自己的代码可以处理超过两位数的数字!

深入阅读

这仅涵盖了部分重要亮点。如需了解 Chrome 95 中的其他变更,请参阅以下链接。

订阅

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

我是 Pete LePage,Chrome 96 发布后,我会立即在此向您介绍 Chrome 中的新功能!