Chrome 80 的新变化

Pete LePage

Chrome 80 现已发布，其中包含许多面向开发者的新功能！

支持以下内容：

我是 Pete LePage，让我们深入了解 Chrome 80 中面向开发者的新功能！

模块工作器

模块 Worker 是 Web Worker 的新模式，具有 JavaScript 模块的人体工学和性能优势，现已推出。Worker 构造函数接受新的 {type: "module"} 选项，该选项会更改脚本的加载和执行方式，以匹配 <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

改用 JavaScript 模块后，还可以使用动态导入来延迟加载代码，而不会阻塞 worker 的执行。如需了解详情，请参阅 web.dev 上 Jason 的文章使用模块 worker 对 Web 进行线程处理。

可选链式调用

尝试读取对象中深层嵌套的属性可能会出错，尤其是在某些内容可能无法求值的情况下。

// Error prone-version, could throw.
const nameLength = db.user.name.length;

在继续之前检查每个值很容易就会变成深层嵌套的 if 语句，或者需要 try / catch 块。

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 新增了对名为可选链接的 JavaScript 新功能的支持。使用可选链接时，如果其中一个属性返回 null 或 undefined（而不是抛出错误），整个操作会直接返回 undefined。

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

如需了解详情，请参阅 v8 博客上的可选链式调用博文！

源试用升级

有 3 项新功能从 Origin 试用版升级为稳定版，任何网站都可以使用这些功能，而无需使用令牌。

定期后台同步

首先是定期后台同步，它会定期在后台同步数据，以便用户打开已安装的 PWA 时，始终能看到最新的数据。

联系人选择器

接下来是 Contact Picker API，这是一个按需 API，可让用户从联系人列表中选择条目，并与网站共享所选条目的有限详细信息。

它让用户能够在需要时分享自己想要的内容，并更轻松地与亲朋好友联系互动。

最后，借助获取已安装的相关应用方法，您的 Web 应用可以检查用户设备上是否安装了您的原生应用。

最常见的用例之一是，在用户未安装原生应用时，决定是否宣传安装 PWA。或者，您可能希望停用某个应用的某些功能（如果该功能由另一个应用提供）。

新的来源试用

Content Indexing API

您如何让用户知道您在 PWA 中缓存的内容？这里存在发现问题。他们知道如何打开您的应用吗？或者，哪些内容可供使用？

Content Indexing API 是一项新的源代码试用版，可让您将支持离线使用的网页的网址和元数据添加到由浏览器维护且对用户易于查看的本地索引。

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

如需向索引添加内容，我需要获取服务工件注册，然后调用 index.add 并提供与内容相关的元数据。

填充索引后，该索引会显示在 Chrome for Android 的“下载”页面的专用区域中。如需了解完整详情，请参阅 web.dev 上 Jeff 的文章使用 Content Indexing API 为支持离线功能的网页编制索引。

通知触发器

通知是许多应用的重要组成部分。不过，推送通知的可靠性取决于您所连接的网络。虽然在大多数情况下这种方法有效，但有时会出问题。例如，如果您处于飞行模式，系统未能向您发送提醒您重要活动的日历提醒，那么您可能会错过该活动。

借助通知触发器，您可以提前安排通知，以便操作系统在适当的时间传送通知，即使没有网络连接或设备处于省电模式也是如此。

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

如需安排通知，请对 Service Worker 注册调用 showNotification。在通知选项中，添加一个带有 TimestampTrigger 的 showTrigger 属性。然后，当时间到达时，浏览器会显示通知。

源试用计划在 Chrome 83 中运行，因此请参阅 Tom 在 web.dev 上发表的通知触发器一文，了解完整详情。

其他来源试用

从 Chrome 80 开始，还有一些其他源试用：

  • Web 连续剧
  • PWA 能够注册为文件处理程序
  • 联系人选择器的新属性

查看源代码试用版中功能的完整列表。

其他相关数据

当然，还有更多！

  • 现在，您可以使用 #:~:text=something 直接链接到网页上的文本片段。Chrome 会滚动到该文本片段的第一个实例并将其突出显示。例如 https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • 在桌面版 PWA 中设置 display: minimal-ui 会在已安装的 PWA 的标题栏中添加返回和重新加载按钮。
  • Chrome 现在支持使用 SVG 图片作为 Favicon。

深入阅读

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

订阅

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

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