Chrome 89 的新功能

Chrome 89 现在已开始向稳定版推出。

以下是您需要知晓的相关信息:

我是 Pete LePage,目前在家工作和拍摄视频。让我们深入了解一下 Chrome 89 中面向开发者的全新功能!

WebHID、WebNFC 和 Web Serial

我对 WebHID、WebNFC 和 Web Serial 非常感兴趣。它们为用户开辟了全新的应用场景,让用户能够与现实世界的硬件进行互动,这在以前是无法实现的。

它们允许开发者连接到有趣而独特的硬件、视频会议应用,以使用专用扬声器上的专用电话按钮。或者任意数量的其他使用情形。

@AndreBan 使用 Web Serial 和大约 60 行代码创建了一个可以与 Raspberry Pi Pico 上的 MicroPython REPL 交互的网页。Espruino 还在其基于网络的 IDE 中使用了 Web Serial。

在 CDS 2019 上,Francois 使用 Web NFC 编写了一款有趣的记忆类游戏。 您必须按正确的顺序点按手机右侧的卡片。

StreamDeck 与 Daft Punk 鼓垫

我最喜欢的是,@bramus 使用 WebHID 连接到 StreamDeck,构建了一个 Daft Punk 鼓垫。如果您没有 StreamDeck,请在 YouTube 上观看他的演示视频,并查看 GitHub 上的代码

无论是您的网站与硬件互动,还是硬件与许多网站互动,用户都能受益,因为他们无需安装特殊的驱动程序或软件。

您可以访问 web.dev/devices 详细了解可以连接的某些设备,也可以查看 WebHIDWebNFCWeb Serial 的入门指南。

PWA 可安装性标准发生变化

自一开始,离线支持就是渐进式 Web 应用可安装性条件的关键部分。与其他已安装的应用一样,用户希望它能可靠地运行。它应该很快,并且用户永远不应看到离线恐龙!

今年晚些时候,我们计划关闭一个漏洞,该漏洞允许少数网站在没有离线体验的情况下通过可安装性标准。如果您的 PWA 已经具备离线体验,则无需进行任何操作。您无需采取任何行动,但如果您还没有添加付款方式,现在就该添加了!

从 Chrome 89 开始,如果您的 PWA 在离线时未提供有效响应,您会在开发者工具的“问题”标签页中看到警告,并且 Lighthouse 会指明存在问题。强制执行将于今年晚些时候在 Chrome 93 中开始。

开发者工具,其中显示了控制台中的警告消息。
Chrome 开发者工具控制台中的警告消息。
开发者工具在“应用”标签页中显示警告消息。
“应用”标签页 >“清单”>“可安装性”中的警告消息。

您可以决定要提供哪种离线体验。理想情况下,您应尽可能详细地描述自己的体验。但至少可以像离线回退网页一样简单。

如需详细了解此项变更以及我们做出此项变更的原因,请参阅改进渐进式 Web 应用离线支持检测

如果您不确定从何处着手,请查看 Workbox。它包含一组库,可为您的 PWA 提供可正式投入使用的 Service Worker。或者,对于简单的离线回退页面,创建离线回退页面一文提供了您所需的所有代码,您可以直接复制并粘贴到您的网站中。

桌面版 Web Share 和 Web Share Target

如果您的网站允许用户创建、修改文件或与文件互动,则应使用 Web Share 和 Web Share Target API。这些 API 已在移动设备上推出一段时间,但现在 ChromeOS 和 Windows 也支持它们了。

借助 Web Share,用户可以将文件或数据发送到设备上安装的其他应用,例如将 Google 相册中的照片分享到 Twitter。

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

如需注册为目标,以便其他应用可以与您共享文件或数据,您需要使用 Web Share Target API。

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

如需入门指南,请参阅使用 Web Share API 与操作系统分享界面集成使用 Web Share Target API 接收分享的数据

等等

当然,还有更多功能。

Chrome 现在允许在 JavaScript 模块中使用顶级 await

PWA 的全新 Omnibox 安装图标

为了减少用户困惑,我们更新了多功能框中针对可安装 PWA 显示的图标。


如果您已使用可信 Web 活动在 Play 商店中为 ChromeOS 提供 PWA,则可以报名参加 Digital Goods API 源试用

深入阅读

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

订阅

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

我是 Pete LePage,Chrome 90 发布后,我会立即在此处向您介绍 Chrome 中的新功能!

积分

Raspberry Pi 和 Arduino 的照片由 Harrison Broadbent 拍摄,选自 Unsplash