Chrome 93 的新功能

Pete LePage

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

我是 Pete LePage，在家工作和拍摄。让我们深入了解 Chrome 93 中面向开发者的新变化。

CSS 模块脚本

现在，您可以使用 import 语句加载 CSS 样式表，就像加载 JavaScript 模块一样。然后，可以采用与可构造样式表相同的方式将样式表应用于文档或影子根。

新的 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

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

借助 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。
  • 异步剪贴板 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 开发者 YouTube 频道，这样每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage，Chrome 94 发布后，我会在这里为您介绍 Chrome 的新变化！