此页面由 Cloud Translation API 翻译。

Chrome 93 的新功能

Pete LePage

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

现在，您可以使用 import 语句加载 CSS 样式表，就像加载 JavaScript 模块一样。
安装的 PWA 可以注册为网址处理程序，以便用户直接跳转到您的 PWA。
我们已根据您的反馈更新了 Multi-Screen Window Placement API，并开始第二次源试用。
PWA 峰会将于 10 月 6 日至 7 日举行。
还有许多更多内容。

我是 Pete LePage，在家工作和拍摄。接下来，我们将深入探讨一下 Chrome 93 为开发者提供了哪些新功能。

CSS 模块脚本

现在，您可以像加载 JavaScript 模块一样使用 import 语句加载 CSS 样式表。然后，您可以按照可构造的样式表一样将样式表应用于文档根或阴影根。

新的 CSS 模块脚本功能非常适合自定义元素。与通过 JavaScript 应用 CSS 的其他方式不同，无需创建元素或混淆 CSS 文本的 JavaScript 字符串。

如需使用它，请使用 assert {type: 'css'} 导入样式表，然后通过调用 adoptedStyleSheets 将其应用于 document 或 shadowRoot。

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

但请注意，如果您未添加 assert，则该文件将被视为 JavaScript 并且无法运行！

如需了解完整详情，请参阅 web.dev 上的使用 CSS 模块脚本导入样式表。

Multi-Screen Window Placement API

对于某些应用，打开新窗口并将其置于特定位置或特定显示屏是一项重要功能。例如，使用 Google 幻灯片进行演示时，我希望幻灯片在主显示屏上全屏显示，而我的演讲者备注显示在另一个显示屏上。

借助 Multi-Screen Window Placement API，可以枚举连接到用户计算机的屏幕，并将窗口放置在特定屏幕上。这是我们的第二次源试用，我们根据您的反馈进行了多项更改。

您可以快速检查设备是否连接了多个屏幕：

const isExtended = window.screen.isExtended;
// returns true/false

不过，关键功能是在 window.getScreens() 中，它提供了有关已连接显示屏的所有详细信息。

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

例如，您可以确定主屏幕，然后使用 requestFullscreen() 在该屏幕上显示某个元素。

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

此外，它还提供了一种方法来监听更改，例如，是否接通或移除了新显示屏。

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

如需更深入地了解相关信息，请参阅 Tom 在 web.dev 上发表的使用 Multi-Screen Window Placement API 管理多种显示屏一文。

缩短发布周期

3 月份，我们宣布了缩短发布周期的计划，每四周发布一次 Chrome 新版本。

这一决定已经到来，我们将于 9 月 21 日发布 Chrome 94。您可以在 Chrome 日历中找到每个版本的计划发布日期。

新的 PWA 功能

如果您正在构建渐进式 Web 应用，有两项新的源试用值得尝试。

PWA 的网址处理程序

如果您安装了 PWA，并且点击指向该 PWA 的链接，您可能希望它在 PWA 中打开，而不是在浏览器标签页中打开。

通过在 Web 应用清单中指定 url_handlers 并将 web-app-origin-association 文件添加到 .well-known/ 目录，您可以告诉浏览器，如果用户点击指向您的 PWA 的链接，它应该会在已安装的 PWA 中打开。

manifest.json 文件中的示例 url_handlers：

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association 文件示例：

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

通过一些额外的验证，您甚至可以让 PWA 处理来自您拥有的其他来源的链接。

如需关于源试用的所有详细信息，请参阅 web.dev 上的 PWA 作为网址处理程序。

窗口控件叠加层

窗口控件叠加层会将客户端区域扩展为覆盖整个窗口，包括标题栏和窗口控制按钮（例如“关闭”“最大化”和“最小化”按钮）。

您可以使用此功能使安装的 PWA 看起来更像其他安装的应用。

如需详细了解源试用，请参阅自定义 PWA 标题栏的窗口控件叠加层。

PWA 峰会

PWA 峰会将于 10 月举行。这是一个免费的在线会议，专注于帮助每个人通过渐进式 Web 应用取得成功。PWA 峰会是一些参与 PWA 技术开发的不同公司（Google、Intel、Microsoft 和 Samsung）的人员之间的合作。

这里有大量精彩的讲座和内容。您可以访问 PWASummit.org 了解详情并进行注册。

还有更多其他奖励！

当然还有很多。

Flexbox 和 flexbox 内容添加了对对齐关键字的支持：start、end、self-start、self-end、left 和 right。
async Clips API 现在支持 SVG 文件。
此外，在设置 meta theme-color 时将遵循 media 属性，因此您可以为浅色模式和深色模式指定不同的主题颜色。

<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

深入阅读

这仅涵盖了部分重要的亮点。如需了解 Chrome 93 中的其他变化，请点击以下链接。

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

我是 Pete LePage