Chrome 89 的新功能

Pete LePage

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

以下是您有必要知道的信息：

我是 Pete LePage，在家工作和拍摄。接下来，我们将深入探讨一下 Chrome 89 为开发者提供了哪些新功能！

WebHID、WebNFC 和网络序列号

我对 WebHID、WebNFC 和 Web Serial 非常感兴趣。与真实硬件互动，这为用户开创了前所未有的新场景。

借助它们，制造商能够连接到有趣、新奇的视频会议应用，从而使用专用扬声器上的专用电话按钮。或任意数量的其他用例。

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

在 CDS 2019 上，Francois 使用 Web NFC 编写了一款有趣的记忆式游戏。 您必须将手机按正确的顺序点按到正确的银行卡上。

流水甲板和达夫特朋克鼓垫

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

无论是与硬件互动的网站，还是可与许多网站互动的硬件，用户都能获得成功，因为他们无需安装特殊的驱动程序或软件。

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

PWA 可安装性标准变更

从一开始，离线支持一直是渐进式 Web 应用可安装性标准的关键部分。与其他已安装的应用一样，用户希望它能够可靠地运行。它应该快速，并且绝不应该出现离线恐龙！

今年晚些时候，我们计划填补一个漏洞：让少数网站无法满足可安装性标准，且无法提供离线体验。如果您的 PWA 已经提供离线体验，则一切准备就绪。您无需采取任何行动，但如果不需要，可以添加一个！

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

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

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

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

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

适用于桌面设备的网络共享和网络共享目标

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

通过网络分享，用户可以将文件或数据发送到其设备上的其他已安装应用，例如将 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 更新了多功能框中的图标。


此外，如果您已使用可信网络活动在 Play 商店中为 ChromeOS 提供了您的 PWA，则可以注册 Digital Goods API 源试用。

深入阅读

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

订阅

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

我是 Pete LePage

赠金

Raspberry Pis 和 Arduino 的照片由 Harrison Broadbent on Unsplash 拍摄