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;
  }
});

如需深入了解，请参阅 web.dev 上 Tom 的文章使用 Multi-Screen Window Placement API 管理多个显示屏。

缩短发布周期

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

时机已到，我们将于 9 月 21 日发布 Chrome 94。您可以在 Chrome 日历中找到各个版本的预定发布日期。

新的 PWA 功能

如果您要构建渐进式 Web 应用，不妨查看两个新的源代码试用版。

PWA 的网址处理程序

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

通过在网络应用清单中指定 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 峰会由 Google、Intel、Microsoft 和三星等多家参与 PWA 技术开发的不同公司的人员联合举办。

大会上有许多精彩的演讲和内容。如需了解详情并注册，请访问 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 中的新变化！