使用JavaScript访问用户设备硬件的新标准介绍使用JavaScript访问设备硬件的新标准 WebHID、WebN

你是否曾经遇到过需要访问用户的设备硬件，并为该功能实现一个桌面应用？你并不孤单。直到最近，实现上述目的的方法还很牵强和麻烦。然而，随着最近Chrome DevTools的更新，使用JavaScript与硬件对话已经成为现实。

因此，在这篇文章中，我将介绍三个新的JavaScript API，即WebHID、WebNFC和WebUSB，它们可用于设备硬件访问。让我们分别看一下这些技术。

在将HID（人机界面设备）集成到软件中时，开发者面临的一个主要问题是，软件应该适应大量的品种；旧设备、新设备、常见型号、不常见型号等等。

WebHID通过提供一个在JavaScript中实现特定设备逻辑的API来解决这个问题。

基本上，如果你想用任天堂Switch的Joy-Con控制器玩Chrome Dino🦖离线游戏，WebHID使你有可能做到这一点。很酷，不是吗？

你可以通过下面的代码段来了解是否支持WebHID。

if ("hid" in navigator) { /* The WebHID API is supported. */ }

你所需要做的就是，选择正确的设备，然后点击连接。就这么简单。

WebHID API是异步的。因此，在等待一个新的设备连接或输入时，它不会阻塞用户界面。

我相信这是在发现WebHID能做什么之后想到的事情。

该API的开发采用了《控制访问强大的网络平台功能》中定义的核心原则，包括用户控制、透明度和人体工程学。此外，在同一时间只允许一个HID设备连接。

此外，Chrome开发工具通过提供浏览器所连接的设备的日志，使其更容易调试与设备的连接。这可以在`chrome://dev-log`（Chrome的一个内部页面）查看。

我们不会在本文中深入讨论实施细节。如果你需要了解这些信息，请在评论区告诉我。

WebHID目前在桌面上被Chrome和Edge支持。

接下来让我们看看WebNFC。

我相信你以前一定接触过NFC（近场通信）这个缩写。

有了WebNFC，现在当NFC标签在你的设备范围内时，你就可以从它那里读取或写入。这是通过NFC标签格式支持的NDEF（NFC数据交换格式）实现的。

比方说，你需要管理你店里的库存。你可以用WebNFC建立一个库存管理网站，它可以将数据读/写到你库存的NFC标签中。

这种可能性是无穷无尽的。这是一个将许多事情自动化的机会，使我们的日常工作更有效率。

与WebHID类似，你可以使用下面的代码片段检查WebNFC的支持情况。

if ('NDEFReader' in window) { /* Scan and write NFC tags */ }

作为一项安全预防措施，Web NFC只适用于顶级框架和安全浏览环境（仅HTTPS）。

如果实现WebNFC的网页消失或不可见，所有与NFC标签的连接将被暂停。当页面再次可见时，这些将被恢复。页面可见性API帮助你识别NFC操作的连接状态。

如果你不熟悉页面可见性API，请参考这篇文章以了解更多信息。

到目前为止，WebNFC只被Chrome Android支持。

接下来，让我们一起看看WebUSB APIs。

WebUSB API允许您使用JavaScript与USB端口进行通信，这一点从Chrome 61开始就可以实现。

然而，你可能会想，我们如何访问每个USB设备的相关驱动程序，对吗？在WebHID API的支持下，它允许硬件制造商为其硬件设备建立跨平台的JavaScript SDK。

与上面讨论的API类似，对WebUSB的支持可以用下面的代码段来检测。

if ("usb" in navigator) { /* The WebUSB API is supported. */ }

在安全方面，有许多控制措施来保护未经授权的USB访问，它只在支持HTTPS的安全环境下工作，以保护任何传输中的数据。此外，标准的浏览器同意程序也是用来请求和授予访问权的。

调试WebUSB API相关的任务也可以通过内部的`chrome://device-log`页面进行，该页面列出了所有连接的USB设备和相关事件。

WebUSB被Chrome浏览器、桌面上的Edge浏览器和Android设备上的Chrome浏览器所支持。

关于WebUSB API的更多细节，你可以参考Access USB Devices on the Web。

无论是你的网站与你的硬件互动，还是你的硬件可以与网络应用互动，这都是一个双赢的局面，因为他们不需要再安装特殊的驱动或软件来连接。

在我看来，这是一个如此酷的新功能，将使生活变得更容易。
让我也知道你对此的想法。谢谢你的阅读!