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 一样,它以异步方式运行,因此不会阻塞主线程。当用户点击所需的颜色时,系统会解析为用户点击的颜色。

您可以尝试快速演示,并在 Glitch 上查看代码

PWA 峰会

您是否观看了本月早些时候的 PWA 峰会?

很高兴看到有这么多人谈论 PWA 并分享他们的体验。如果您错过了大会,请访问 PWASummit.orgPWA Summit YouTube 频道,观看所有视频。

用户代理缩减源试用

用户代理缩减功能可减少用户代理字符串中的信息,使其仅包含浏览器的品牌和重要版本、浏览器的桌面或移动设备区别以及运行它的平台,从而减少被动指纹表面。

从 Chrome 95 开始,我们推出了新的源试用,您现在可以选择接收经过缩减的 UA 字符串。这样,您就可以在缩减后的 UA 成为 Chrome 中的默认行为之前发现和解决问题。

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

如需了解所有详细信息和时间安排,请参阅 developer.chrome.com 上的用户代理缩短来源测试一文。

等等!

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

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 95 中的其他变更,请点击以下链接。

订阅

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

我是 Pete LePage,Chrome 96 发布后,我会立即为您介绍 Chrome 中的新变化!