[譯] 用 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。