WebHID、WebNFC和WebUSB访问设备硬件的新标准为与用户用于Web应用程序的设备硬件交互开辟了新途径。您是否遇到过需要访问用户的设备硬件并仅为该功能实施桌面应用程序？你不是一个人。直到最近，实现上述目标的方法还很牵强和繁琐。然而，随着ChromeDevTools的最新更新，使用JavaScript与硬件对话已成为现实。因此，在本文中，我将介绍三个新的JavaScriptAPI，WebHID、WebNFC和WebUSB，它们可用于设备硬件访问。让我们分别看看这些技术中的每一个。1、什么是WebHID？将HID（人机接口设备）集成到软件中时，开发人员面临的主要问题之一是软件应适应多种多样；旧设备、新设备、常见型号、不常见型号等。WebHID通过提供用于在JavaScript中实现特定于设备的逻辑的API来解决此问题。基本上，如果您想使用NintendoSwitch的Joy-Con控制器玩ChromeDino离线游戏，WebHID可以让您做到这一点。很酷，不是吗？您可以使用下面的代码片段来确定是否支持WebHID。if("hid"innavigator){/*TheWebHIDAPIissupported.*/}应用实现WebHID连接设备后，会出现如下提示。您需要做的就是选择正确的设备并点击连接。就这么简单！WebHIDAPI是异步的。因此它不会在等待新设备连接或输入时阻塞UI。安全注意事项我相信这是在发现WebHID的功能后想到的。API是使用《控制对强大的网络平台功能的访问》中定义的核心原则开发的，包括用户控制、透明度和人体工程学。此外，一次只允许连接一个HID设备。此外，ChromeDevTools通过提供浏览器连接到的设备的日志，可以更轻松地调试与设备的连接。这可以在chrome://device-log（Chrome的内部页面）查看。浏览器兼容性WebHID目前受桌面版Chrome和Edge支持。接下来让我们看看WebNFC。2、什么是WebNFC？相信大家一定遇到过NFC（NearFieldCommunication）这个缩写词。借助WebNFC，您现在可以在设备范围内读取或写入NFC标签。这是通过NFC标签格式支持的NDEF（NFC数据交换格式）完成的。使用WebNFC假设您需要管理商店中的库存。您可以使用WebNFC构建一个库存管理网站，该网站可以将数据读取/写入库存上的NFC标签。可能性是无止境。这是一个使许多事情自动化并使我们的日常工作更有效率的机会。与WebHID类似，您可以使用下面的代码片段检查WebNFC支持。if('NDEFReader'inwindow){/*??ScanandwriteNFCtags*/}安全说明作为一项安全预防措施，WebNFC仅适用于顶级框架和安全浏览环境（仅限HTTPS）。如果实现WebNFC的网页消失或变得不可见，所有与NFC标签的连接都将被暂停。当页面再次可见时，这些将被恢复。页面可见性API（PageVisibilityAPI）帮助您识别NFC操作的连接状态。浏览器兼容性ChromeAndroid目前仅支持WebNFC。接下来，让我们看一下WebUSBAPI。3.什么是WebUSB？WebUSBAPI允许您使用自Chrome61起可用的JavaScript与USB端口通信。但是，您可能会想，我们如何访问每个USB设备的相关驱动程序，对吧？由WebHIDAPI提供支持，它允许硬件制造商为其硬件设备构建跨平台的JavaScriptSDK。与上面讨论的API类似，可以使用以下代码片段检测对WebUSB的支持。if("usb"innavigator){/*TheWebUSBAPIissupported.*/}安全安全方面有很多控制措施可以保护未经授权的USB访问，并且它仅在支持HTTPS以保护任何数据的安全上下文中起作用。此外，标准浏览器同意程序用于请求和授予访问权限。与WebUSBAPI相关的调试任务也可以通过内部chrome://device-log页面执行，该页面列出了所有连接的USB设备和相关事件。浏览器兼容性WebUSB受Chrome浏览器、桌面版Edge和Android设备上的Chrome支持。有关WebUSBAPI的更多详细信息，请参阅访问Web上的USB设备。总结无论您的网站与您的硬件交互，还是您的硬件与Web应用程序交互，这都是双赢的局面，因为它们不需要安装特殊的驱动程序或软件来连接。在我看来，这是一个非常酷的新功能，可以让生活变得更轻松。原文：https://blog.bitsrc.io/new-standards-to-access-user-device-hardware-using-javascript-86b0c156dd3d作者：ViduniWickramarachchi本文转载自微信公众号《前端全-stackdeveloper”，您可以通过以下二维码关注。转载本文请联系前端全栈开发公众号。
