Chrome 73 中的新功能

皮特·莱佩奇

Chrome 73 新增了对以下功能的支持：

以及更多功能！

我是 Pete LePage。下面我们就来详细了解一下 Chrome 73 为开发者提供了哪些新功能！

更新日志

此处仅涵盖部分主要亮点，请点击以下链接，了解 Chrome 73 中的其他变化。

渐进式 Web 应用随时随地可供使用

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

渐进式 Web 应用既快速又可靠；无论网络连接状况如何，它始终以相同的速度加载和执行。它们通过充分利用设备功能的现代 Web 功能提供丰富、引人入胜的体验。

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

我们希望缩小 Web 应用与原生代码之间的功能差距，为通过 Web 交付的现代应用奠定坚实基础。我们正在努力添加新的 Web 平台功能，以便您能够使用文件系统、唤醒锁定、在地址栏中添加环境标志以告知用户您的 PWA 可以安装、为企业安装政策等更多功能。

如果您已经在构建移动 PWA，桌面设备 PWA 也不例外。事实上，如果您已经使用了自适应设计，那很可能已经很好了。您的单一代码库即可同时用于桌面设备和移动设备。如果您刚开始使用 PWA，您会惊讶地发现创建 PWA 是如此简单！

  1. 添加清单
  2. 创建一组图标
  3. 添加样板 Service Worker

然后以此为起点，不断迭代。

Signed HTTP Exchange (SXG)

Signed HTTP Exchange (SXG) 是一项名为 Web 软件包的新兴技术的一部分，现已在 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 实例，然后使用 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 的可构造的样式表：无缝可重复使用的样式一文！

还有更多其他奖励！

以上只是我们针对开发者在 Chrome 73 中所做的更改中的一小部分，当然还有许多其他变化。

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

订阅

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

我叫 Pete LePage