Chrome 89 的新功能

Pete LePage

Chrome 89 现已开始面向稳定版发布。

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

我是 Pete LePage，目前在家办公和录制视频。我们来深入了解一下 Chrome 89 中面向开发者的新功能吧！

WebHID、WebNFC 和 Web Serial

我非常期待 WebHID、WebNFC 和 Web Serial。它们为用户开辟了前所未有的全新场景，让用户能够与真实的硬件进行互动。

借助这些 API，开发者可以连接到有趣、古怪的硬件和视频会议应用，以便在专用音箱上使用专用电话按钮。或者任意多种其他用例。

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

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

带有 Daft Punk 鼓垫的 StreamDeck

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

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

您可以访问 web.dev/devices，详细了解您可以连接到的一些设备，也可以查看 WebHID、WebNFC 和 Web Serial 的入门指南。

PWA 可安装性条件变更

从一开始，离线支持就是 Progressive Web App 可安装性条件的关键部分。与其他已安装的应用一样，用户希望它能够可靠运行。该过程应该很快，而且用户绝不会看到离线恐龙！

今年晚些时候，我们计划堵上一个漏洞，该漏洞允许部分网站在没有离线体验的情况下通过可安装性条件。如果您的 PWA 已提供离线体验，则无需执行任何操作。您无需采取任何措施，但如果您还没有添加，现在是时候添加了！

从 Chrome 89 开始，如果您的 PWA 在离线状态下未提供有效响应，您会在开发者工具的“问题”标签页下看到一条警告，Lighthouse 也会指明存在问题。我们将于今年晚些时候在 Chrome 93 中开始强制执行此政策。

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

您可以决定要提供什么样的离线体验。理想情况下，您应提供尽可能多的体验。但至少，它可以像离线后备页面一样简单。

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

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

适用于桌面设备的“分享到网站”和“分享到网站目标网址”

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

借助 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 的新多功能框安装图标

为避免用户感到困惑，我们更新了多功能框中显示的可安装 PWA 的图标。


如果您使用了可信 Web 活动，在适用于 ChromeOS 的 Play 商店中提供您的 PWA，则可以注册 Digital Goods API 源试用。

深入阅读

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

订阅

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

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

赠金

Raspberry Pi 和 Arduino 的照片由 Unsplash 上的 Harrison Broadbent 拍摄