Chrome 73 中的新功能

Pete LePage

在 Chrome 73 中，我们添加了对以下内容的支持：

还有更多功能！

我是 Pete LePage。我们来深入了解一下 Chrome 73 中面向开发者的新功能！

更新日志

本文仅介绍了一些主要亮点，如需了解 Chrome 73 中的其他变更，请访问以下链接。

渐进式 Web 应用可在任何地方运行

渐进式 Web 应用可提供可安装的应用式体验，直接通过网络制作和交付。在 Chrome 73 中，我们添加了对 macOS 的支持，从而为所有桌面平台（Mac、Windows、ChromeOS 和 Linux）以及移动平台引入了对渐进式 Web 应用的支持，简化了 Web 应用开发。

Progressive Web App 速度快且可靠；无论网络连接如何，始终以相同的速度加载和运行。它们通过充分利用设备功能的现代 Web 功能，提供丰富且富有吸引力的体验。

用户可以从 Chrome 的上下文菜单中安装您的 PWA，您也可以使用 beforeinstallprompt 事件直接宣传安装体验。安装后，PWA 会与操作系统集成，从而像原生应用一样运行：用户可在与其他应用相同的位置找到并启动它们，它们会在自己的窗口中运行，会显示在任务切换器中，其图标可以显示通知标记等。

我们希望缩小 Web 与原生应用之间的功能差距，为在 Web 上运行的新型应用提供坚实的基础。我们正在努力添加新的 Web 平台功能，以便您访问文件系统、唤醒锁定、向地址栏添加氛围模式标记（以便用户知道可以安装您的 PWA）、为企业安装政策等更多功能。

如果您已经在构建移动 PWA，那么桌面 PWA 也无异。事实上，如果您使用的是自适应设计，那么您可能已经做好了准备。您的单一代码库可在桌面设备和移动设备上运行。如果您刚开始接触 PWA，一定会惊讶于其创建方式之简单！

  1. 添加清单
  2. 创建一组图标
  3. 添加样板服务工作线程

然后，从中迭代。

Signed HTTP Exchange

Signed HTTP Exchange (SXG) 是新兴技术 Web Packages 的一部分，现已在 Chrome 73 中推出。借助 Signed HTTP Exchange，您可以创建可由其他方传送的“可移植”内容，并且（这也是关键之处）它会保留原始网站的完整性和出处。

Signed Exchange：精髓

这样可以将内容的来源与传送内容的服务器分离，但由于内容已签名，因此看起来就像是从您的服务器传送的。当浏览器加载此 Signed Exchange 时，它可以安全地在地址栏中显示您的网址，因为该交换中的签名表明内容最初来自您的源网址。

通过签名 HTTP 交换，您可以更快地向用户传送内容，从而无需放弃对证书私钥的控制即可获享 CDN 的好处。AMP 团队计划在 Google 搜索结果页上使用已签名 HTTP 交换，以改进 AMP 网址并加快搜索结果的点击速度。

如需详细了解如何开始使用，请参阅 Kinuko 的 Signed HTTP Exchanges 博文。

可构造的样式表

Chrome 73 中新增了可构建的样式表，它为我们提供了一种创建和分发可重复使用的样式的新方法，这在使用 Shadow DOM 时尤为重要。

一直以来，您都可以使用 JavaScript 创建样式表。使用 document.createElement('style') 创建 <style> 元素。然后，访问其工作表属性以获取对底层 CSSStyleSheet 实例的引用，并设置样式。

显示 CSS 准备和应用的示意图

使用此方法往往会导致样式表膨胀。更糟糕的是，它会导致未设置样式的内容闪烁。借助可构建的样式表，您可以定义和准备共享 CSS 样式，然后轻松地将这些样式应用于多个阴影根或文档，而不会出现重复。

对共享 CSSStyleSheet 的更新会应用于采用了该 CSSStyleSheet 的所有根，并且在样式表加载后，采用样式表的过程会快速且同步。

入门很简单，只需创建 CSSStyleSheet 的新实例，然后使用 replace 或 replaceSync 更新样式表规则即可。

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

如需了解更多详情和代码示例，请参阅 Jason Miller 的 Constructable Stylesheets: seamless reusable styles 一文！

等等！

当然，这只是 Chrome 73 中面向开发者的部分变更，还有许多其他变更。

  • matchAll() 是字符串原型上的一种新的正则表达式匹配方法，会返回包含完整匹配项的数组。
  • <link> 元素现在支持 imagesrcset 和 imagesizes 属性，以对应于 HTMLImageElement 的 srcset 和 sizes 属性。
  • Blink 的阴影模糊半径实现现在与 Firefox 和 Safari 一致。
  • Mac 版 Chrome 现已支持 Chrome 界面的深色模式，Windows 版也即将支持。此外，我们还在研究 CSS 媒体查询 prefers-color-scheme，该查询可用于检测用户是否请求系统使用浅色或深色主题。此问题的跟踪 bug 是为 Chrome 和 Firefox 添加了对 CSS prefers-color-scheme 媒体功能的支持。

订阅

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

我是 Pete LePage，Chrome 74 发布后，我会立即为您介绍 Chrome 中的新变化！