大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天带着大家一起看看最新发布的Chrome 110带来了那些新特性！

1.:picture-in-picture伪类

画中画 API 允许网站创建始终位于其他窗口之上的浮动视频窗口，以便用户在与设备上的其他网站或应用程序交互时可以继续播放媒体。 在 Chrome 110 中，添加了一个 CSS 伪类，以帮助 Web 开发者自定义视频进入、退出画中画时的媒体播放器。

使用 :picture-in-picture 伪类，可以向元素添加样式以改善体验。下面的代码片段展示了如何使用画中画类向视频容器添加一条消息，提醒用户视频正在其他地方播放。

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

在视频元素上使用伪类，使元素透明以正确显示消息。

以下是:picture-in-picture伪类的浏览器支持情况，目前只有Chrome>110的浏览器支持，其他浏览器都不支持。

2.credentialless iframe

跨源隔离（Cross Origin Isolation）的最大挑战之一是所有跨源 iframe 都必须部署 COEP 和 CORP 。 浏览器不会加载没有这些标头的 iframe。

Cross-Origin-Embedder-Policy (COEP) 响应标头：可防止文档加载未明确授予文档权限 (通过 CORP 或者 CORS) 的任何跨域资源。

credentialless 属性有助于嵌入未设置这些标头的第三方 iframe。使用 credentialless，iframe 是从不同的空上下文加载的，而且是在没有 cookie 的情况下加载的。

同样，LocalStorage、CacheStorage 等存储 API 会在新的临时分区中加载和存储数据。 一旦顶级文档被卸载，所有这些存储都将被清除，从而允许删除 COEP 限制。

<iframe credentialless src="https://example.com">
// 为iframe添加credentialless

以下是credentialless的浏览器支持情况，目前只有Chrome>110的浏览器支持，其他浏览器都不支持。

3.Launch Handler API（启动处理程序 API）

3.1 什么是Launch Handler？

启动处理程序 API 可让开发者控制 Web 应用程序的启动方式，例如，是复用现有窗口还是新开窗口，以及是否将所选窗口导航至启动 URL。

比如例子：在桌面环境中，安装了一个应用程序，然后在浏览器上访问它，有一个按钮可以移动到独立应用程序窗口。 以前，唯一可能的行为是在新窗口中启动应用程序。

现在，使用 launch_handler 清单成员，网络应用程序可以自定义启动行为。

例如，下面的代码片段会导致此 Web 应用程序的所有启动都集中在现有应用程序窗口并导航到它（如果它存在），而不是总是启动一个新窗口。

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

client_mode支持以下属性：

• navigate-new：Web 应用程序窗口中创建一个新的浏览上下文以加载目标 URL。
• navigate-existing：航到最新活跃的窗口，启动的目标 URL。
• focus-existing：最近与 Web 应用程序窗口中的浏览上下文交互来处理启动。 targetURL 设置为启动 URL 的新 LaunchParams 对象将在文档的 window.launchQueue 中排队。
• auto：行为由浏览器自行决定。 例如，移动设备仅支持单个客户端并会使用 existing-client，而桌面设备支持多个窗口并会使用 navigate-new 以避免数据丢失。

client_mode 属性还接受数组，将使用第一个有效值。 这是为了允许在不破坏与现有实现的向后兼容性的情况下将新值添加到规范中。

3.2 Launch Handler使用？

首先判断浏览器是否支持Launch Handler。

if ('launchQueue' in window && 'targetURL' in LaunchParams.prototype) {
  // Launch Handler API支持
}

在以下代码中，函数 extractSongID() 从启动时传递的 URL 中提取歌曲 ID，用于在音乐播放器 PWA 中播放歌曲。

launchQueue.setConsumer((launchParams) => {
  const songID = extractSongId(launchParams.targetURL);
  if (songID) {
    playSong(songID);
  }
});

以下是Launch Handler的浏览器支持情况，目前只有Chrome>110的浏览器支持，其他浏览器都不支持。

3.本文总结

本文主要和大家介绍下Chrome 110新特性，包括:picture-in-picture伪类、credentialless iframe，Launch Handler API等等。文末的参考资料提供了大量优秀文档以供学习，如果有兴趣的读者可以自行阅读。

参考资料

https://googlechrome.github.io/samples/picture-in-picture/css-pseudo-class

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy

https://developer.chrome.com/blog/new-in-chrome-110/

https://developer.chrome.com/docs/web-platform/launch-handler/#the-launch_handler-manifest-member