Chrome 80 的新变化

Chrome 80 现已发布,其中包含为开发者提供的大量新功能!

支持以下设备:

我是 Pete LePage,接下来我们将深入了解 Chrome 80 会为开发者带来哪些新变化!

模块 worker

模块工作器是一种面向 Web 工作器的新模式,具有工效学设计以及 JavaScript 模块的性能优势,现已发布。worker 构造函数接受新的 {type: "module"} 选项,该选项会更改脚本的加载和执行方式,以匹配 <script type="module">

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

移至 JavaScript 模块后,您还可以使用动态导入来延迟加载代码,而不会阻止 worker 的执行。如需了解详情,请查看 Jason 在 web.dev 上发表的使用模块工作器对 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”,而不是抛出错误。

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

如需了解详情,请查看 v8 博客上的可选链接博文!

源试用升级

有三项新功能已从初始试用升级到稳定版,可供任何网站使用,而无需令牌。

定期后台同步

首先是定期后台同步,它会定期在后台同步数据,以便用户打开您安装的 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',
  }],
});

为了向索引添加内容,我需要获取 Service Worker 注册,然后调用 index.add,并提供内容的元数据。

索引填充完毕后,它会显示在 Chrome(Android 版)“下载”页面的专用区域中。如需了解完整详情,请查看 Jeff 在 web.dev 上发表的使用 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。在通知选项中,添加带 TimestampTriggershowTrigger 属性。然后,当时间到时,浏览器将显示通知。

源试用计划在 Chrome 83 上运行,如需了解完整详情,请查看 Tom 在 web.dev 上发布的 Notification Triggers 帖子。

其他源试用

我们还将通过 Chrome 80 开始进行其他一些源试用:

  • 网络序列号
  • PWA 注册为文件处理程序的功能
  • 联系人选择器的新属性

请查看源试用的完整功能列表。

等等

当然还有更多精彩内容!

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

深入阅读

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

订阅

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

我叫 Pete LePage