Chrome 89 的新功能

Pete LePage

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。

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

StreamDeck 与 Daft Punk Drum Pad

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

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

您可以访问 web.dev/devices 详细了解可以连接的某些设备，也可以查看 WebHID、WebNFC 和 Web 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 Developers YouTube 频道，这样每当我们发布新视频时，您都会收到电子邮件通知。