[译] 用 JavaScript 访问用户设备硬件的新标准

• 原文地址：New Standards to Access User Device Hardware using JavaScript
• 原文做者：Viduni Wickramarachchi
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Badd
• 校对者：Chorer，KimYangOfCat

用 JavaScript 访问用户设备硬件的新标准

你是否曾仅为了能访问用户设备硬件而不得不开发一个桌面应用？你不是惟一一个深受其苦的人。就在不久以前，用 JavaScript 访问硬件的方式仍是勉强而麻烦的。 然而，随着近期的 Chrome 开发工具的更新，用 JavaScript 与硬件交互已经是梦想成真。

所以，在本文中，我将会介绍 3 个新的 JavaScript API，即 WebHID、WebNFC 以及 WebUSB，它们将可用于访问设备硬件。下面让咱们来逐一了解每一个新技术点。

1. 什么是 WebHID？

在把一个 HID（Human Interface Device，人机接口设备）集成到软件中的时候，开发者面对的主要问题就是须要作大量的兼容工做，包括对旧/新设备、通用/非通用模型等的兼容。

WebHID 提供了一个 API 来解决这个问题，此 API 让咱们可以用 JavaScript 实现针对特定设备的逻辑。

举个简单的例子，若是你想要用任天堂 Switch 的 Joy-Con 手柄玩 Chrome 的离线小恐龙 🦖 游戏，有了 WebHID 就能够实现。是否是挺酷的？

用下面这段代码，你就能检测运行环境是否支持 WebHID。

if ("hid" in navigator) { /* 支持 WebHID API。 */ }
复制代码

当一个应用使用了 WebHID 去链接一个设备，就会显示下图这样的提示弹窗。

而你须要作的就是，选择正确的设备，而后点击链接（Connect）。就这么简单。

WebHID API 是异步的。所以在等待链接新设备或者用户输入时，界面也不会被阻塞。

安全性考量

我知道当你了解了 WebHID 能作什么以后，必定会想到安全问题。

Chromium 文档规定了对强大的 Web 平台特性的访问控制，而这个 API 正是根据文档中定义的核心原则开发的，包括用户控制、透明度、人体工程学等方面的原则。更严格的是，同一时刻只容许链接一个 HID 设备。

另外，Chrome 开发者工具针对浏览器当前链接的设备提供了日志输出功能，这让调试设备链接更加容易。该日志可在 chrome://device-log（Chrome 内部页面）中看到。

在本文中，咱们不会涉及底层实现细节。若是你想要了解实现细节，请在评论区留言。

浏览器兼容性

目前桌面端的 Chrome 和 Edge 支持 WebHID。

接着让咱们来看看 WebNFC。

2. 什么是 WebNFC？

相信你以前确定接触过 NFC（Near field communications，近距离通讯技术）这个缩写名词。

有了 WebNFC，当一个 NFC 标签位于你的设备的识别范围以内时，你就能对其读取或写入数据了。这是经过 NDEF（NFC 数据交换格式）技术实现的，是 NFC 标签支持的一种格式。

使用 WebNFC

假设一个场景：你须要管理自家店铺的库存。你能够经过 WebNFC 向库存商品上的 NFC 标签读/写数据，这样就能搭建起一个库存管理站点。

WebNFC 带来的可能性是无限的。这是一个机会，一个能让许多过程自动化、让平常工做提效的机会。

与 WebHID 相似，你能够用下面的代码检查 WebNFC 的支持状况。

if ('NDEFReader' in window) { /* 扫描、写入 NFC 标签 */ }
复制代码

安全性考量

为了防患于未然，只有顶层框架和安全的浏览环境（只容许 HTTPS 协议）可以使用 WebNFC。

若是一个实现了 WebNFC 功能的网页消失了或肉眼不可见，那么和该网页链接的全部 NFC 标签都会被挂起链接。当页面从新可见时，这些链接才会恢复。页面可见性 API 能够帮你识别 NFC 操做的链接状态。

若是你不熟悉页面可见性 API 的话，能够读读这篇文章。

浏览器兼容性

目前仅有 Android 端的 Chrome 支持 WebNFC。

下面，让咱们一块儿来看看 WebUSB API。

3. 什么是 WebUSB？

从 Chrome 61 版本开始，WebUSB API 让你能够用 JavaScript 与 USB 端口进行通讯。

然而，你可能会想，咱们怎么才能访问每一个 USB 设备的相关驱动，对吧？有了 WebHID API 的支持，硬件厂商可以针对自家的硬件设备开发出跨平台的 JavaScript SDK。

与上述 API 相似，咱们可使用下列代码检测 WebUSB 的支持状况。

if ("usb" in navigator) { /* 支持 WebUSB API。 */ }
复制代码

安全性

有许多控制措施能够保护未受权的 USB 访问的安全性，并且它仅在只容许 HTTPS 协议的安全环境运行，以此来保护传输的数据。另外，会有标准浏览器受权流程来请求和授予访问权限。

WebUSB API 相关的调试任务也能够在 chrome://device-log 页面看到，页面里会列出当前链接的全部 USB 设备及相关事件。

浏览器兼容性

桌面端 Chrome、Edge，以及 Android 端 Chrome 支持 WebUSB。

关于 WebUSB API 的更多细节，你能够参阅 Web 端访问 USB 设备文档。

总结

不论是你的网站要和硬件交互，仍是你有要和 Web 应用交互的硬件，新标准带来的都是共赢，由于它们无需再安装专门的驱动或软件就能进行链接了。

在我看来，这个新功能太酷了，会让生活更加便捷。

欢迎和我分享你对此的想法。感谢阅读！

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。