此页面由 Cloud Translation API 翻译。

Chrome 102 的新变化

Pete LePage

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

已安装的 PWA 可以注册为文件处理程序，以便用户轻松直接从磁盘打开文件。
借助 inert 属性，您可以将 DOM 的某些部分标记为不活跃。
Navigation API 可让单页应用更轻松地处理网址的导航和更新
还有许多其他功能。

我是 Pete LePage。我们来深入了解一下 Chrome 102 中面向开发者的新变化。

File Handling API

File Handling API 允许已安装的 PWA 向操作系统注册为文件处理程序。注册后，用户可以点击文件，使用已安装的 PWA 打开该文件。这非常适合与文件互动的 PWA，例如图片编辑器、IDE、文本编辑器等。

如需向 PWA 添加文件处理功能，您需要更新网络应用清单，添加一个 file_handlers 数组，其中包含有关 PWA 可以处理的文件类型的详细信息。您需要指定要打开的网址、MIME 类型、文件类型图标和启动类型。启动类型定义了应在单个客户端中还是在多个客户端中打开多个文件。

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

然后，如需在 PWA 启动时访问这些文件，您需要为 launchQueue 对象指定使用方。启动会加入队列，直到被使用方处理。

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

如需了解所有详情，请参阅让已安装的 Web 应用成为文件处理程序。

`inert` 属性

inert 属性是一个全局 HTML 属性，用于指示浏览器忽略元素的用户输入事件，包括焦点事件和辅助技术事件。

这在构建界面时非常有用。例如，对于模态对话框，您希望在模态对话框可见时将焦点“捕获”在模态对话框内。或者，对于用户不总是可见的抽屉，添加 inert 可确保在抽屉不在屏幕上时，键盘用户无法意外与其互动。

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

在这里，inert 已在第二个 <div> 元素上声明，因此其中包含的所有内容（包括 <button> 和 <label>）都无法获得焦点或被点击。

Chrome 102 支持 inert，Firefox 和 Safari 均支持此功能。

如需了解详情，请参阅 Introduction inert。

许多 Web 应用都依赖于能够在不导航到其他网页的情况下更新网址。目前，我们使用 History API，但它很笨重，并且并不总能按预期运行。Navigation API 并非尝试修补 History API 的缺点，而是彻底改进了这一领域。

如需使用 Navigation API，请在全局 navigation 对象上添加 navigate 监听器。

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

从根本上讲，该事件是集中的，无论用户执行了点击链接、提交表单或返回和前进等操作，都会针对所有类型的导航触发，即使导航是以程序化方式触发的。在大多数情况下，它允许您的代码替换浏览器针对该操作的默认行为。

如需了解完整详情并试用演示版，请参阅新型客户端路由：Navigation API。

等等！

当然还有很多其他功能。

新的 Sanitizer API 旨在构建一个强大的处理器，以便将任意字符串安全地插入到网页中。
hidden=until-found 属性让浏览器可以在隐藏区域中搜索文本，并在找到匹配项时显示该部分。

深入阅读

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

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

我是 Pete LePage，Chrome 103 发布后，我会立刻跟大家分享 Chrome 的新变化！

Chrome 102 的新变化

File Handling API

inert 属性

Navigation API

等等！

深入阅读

订阅

`inert` 属性