Chrome 96 的新功能

Pete LePage

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

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

PWA 的清单 id

当用户安装 PWA 时，浏览器需要通过一种方式对其进行唯一标识。 但直到最近，Web 应用清单规范仍未指定如何识别 PWA，这让浏览器自行决定，并导致实现方式有所不同。在某些浏览器中，使用 start_url，而在另一些浏览器中，使用指向清单文件的路径。

因此，在不破坏安装体验的情况下，更改上述任一字段都无法更改。现在，我们推出了一个新的可选属性 id，该属性可让您明确定义用于 PWA 的标识符。

向清单添加 id 属性可移除对 start_url 或清单位置的依赖，并能够更新这些字段。

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

从 Chrome 96 开始，基于 Chromium 的桌面版浏览器将支持 id 属性。支持移动设备（目前使用清单网址作为唯一 ID）应该会在 2022 年上半年推出。

显示已计算的应用 ID 的开发者工具

如果您已在生产环境中使用 PWA，并且想要将 id 添加到您的清单中，您将需要使用浏览器分配的 ID。您可以在开发者工具的Application面板的Manifest窗格中找到 id。

对于全新的 PWA，您可以将 id 设置为您喜欢的任何字符串值，但请注意，您日后无法更改它，因此请谨慎选择。

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

如需了解详情，请参阅使用 Web 应用清单 ID 属性唯一标识 PWA。

PWA 的网址协议处理程序

Web 应用可以使用 navigator.registerProtocolHandler() 注册为协议处理程序。例如，Gmail 可以注册 mailto 协议。然后，当用户点击带有 mailto: 前缀的链接时，Gmail 就会打开，以便用户轻松发送电子邮件。

从 Chrome 96 开始，PWA 可以在安装过程中注册为协议处理程序。如需为您的 PWA 执行此操作，请向 Web 应用清单中添加 protocol_handlers 属性，指定要处理的 protocol 以及点击后应打开的 url。

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

这种方式有一些限制，您不能只注册任何协议。如需了解完整详情，请参阅为 PWA 注册网址协议处理程序，以及如何使用 web+ 语法创建自己的协议！

优先级提示（源试用）

当浏览器解析网页并开始发现和下载图片、脚本或 CSS 等资源时，会为这些资源分配提取优先级，以尝试优化网页加载。浏览器非常擅长分配优先级，但并非在所有情况下都是最佳的。

优先级提示是一项实验性功能，从 Chrome 96 开始以源试用的形式提供，有助于优化核心网页指标。借助 importance 属性，您可以为 CSS、字体、脚本、图片和 iframe 等资源类型指定优先级。

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

例如，以下是 Google 机票页面。该背景图片就是最大内容渲染 (LCP)。

带有大背景图片的 Google 机票屏幕截图

我们来看一看它有无优先级提示时的加载情况。将背景图片的优先级设置为 high 后，LCP 会从 2.6 秒缩短到 1.9 秒。

请查看使用 Fetch Priority API 优化资源加载，了解所有详细信息、如何注册源试用，以及有关它如何帮助提升渲染性能的一些精彩示例。

在 UA 字符串中模拟 Chrome 100

明年年初，我们将达到 Chrome 100，这是一个三位数的版本号。您应检查任何用于检查版本号或解析 UA 字符串的代码，以确保它可以处理三位数。

从 Chrome 96 开始，我们推出了一个新标记 #force-major-version-to-100，它会将当前版本号更改为 100，以确保一切按预期运行。

Chrome 标记页面，其中突出显示了新的 #force-major-version-to-100 选项

有关详情，请参阅强制用户代理字符串中的 Chrome 主要版本设为 100。

Chrome 开发者峰会

Chrome 开发者峰会圆满结束。所有视频和内容均可在线访问请访问 Chrome 开发者峰会网站；如果您错过了主旨演讲或直播，请查看 Chrome 开发者 YouTube 频道上的 CDS 播放列表。

还有更多其他奖励！

当然还有很多。

  • 往返缓存（即 bfcache）现已在稳定版中提供，这使得 Chrome 能够与 Firefox 和 Safari 保持一致。

深入阅读

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

订阅

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

我是 Pete LePage