此页面由 Cloud Translation API 翻译。

Chrome 102 的新变化

Pete LePage

以下是您有必要知道的信息：

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

我是 Pete LePage。我们来深入了解一下 Chrome 102 会为开发者带来哪些新变化

File Handling API

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

如需向 PWA 添加文件处理功能，您需要更新 Web 应用清单，添加一个 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 将很快支持 inert。

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

许多 Web 应用都依赖于能够在不进行页面导航的情况下更新网址。如今，我们使用 History API，但该 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 Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage

Chrome 102 的新变化

File Handling API

inert 属性

Navigation API

还有更多其他奖励！

深入阅读

订阅

`inert` 属性