[[402093]]

WebHID，WebNFC和WebUSB開辟了新的途徑，可以與用戶用于Web應用程序的設備硬件進行交互。

你是否遇到過需要訪問用戶的設備硬件，并只為該功能實現一個桌面應用程序?你并不孤單。直到最近，實現上述目的的方式還很牽強和麻煩。然而，隨著最近Chrome DevTools的更新，使用JavaScript與硬件對話已經成為現實。

因此，在本文中，我將介紹三個新的JavaScript API，即WebHID，WebNFC和WebUSB可用于設備硬件訪問。讓我們分別看一下這些技術。

1.什么是WebHID?

在將HID(人機界面設備)集成到軟件中時，開發人員面臨的一個主要問題是，軟件應適應大量的品種;舊設備、新設備、常見的型號、不常見的型號等。

WebHID通過提供一個在JavaScript中實現設備特定邏輯的API來解決這個問題。

基本上，如果你想用任天堂Switch的Joy-Con控制器玩Chrome Dino??離線游戲，WebHID使你有可能做到這一點。很酷，不是嗎?

你可以使用下面的代碼片段來了解是否支持WebHID。

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

應用程序實施WebHID連接設備后，將顯示以下提示。

你需要做的是，選擇正確的設備并點擊連接。就這么簡單!

WebHID API是異步的。因此，在等待新設備連接或輸入時，它不會阻止UI。

安全注意事項

我相信這是在發現WebHID能做什么之后想到的事情。

該API的開發采用了《控制對強大的網絡平臺功能的訪問》中定義的核心原則，包括用戶控制、透明度和人體工程學。此外，一次僅允許一個HID設備連接。

此外，Chrome DevTools通過提供瀏覽器所連接的設備的日志，使其更容易調試與設備的連接。這可以在chrome://device-log(Chrome的一個內部頁面)查看。

瀏覽器兼容性

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

接下來讓我們看一下WebNFC。

2.什么是WebNFC?

我相信，你以前一定遇到過NFC(近場通信)這個縮寫。

有了WebNFC，現在你可以讀取或寫入NFC標簽，當它在你的設備范圍內。這是通過NDEF (NFC數據交換格式)完成的，它是由NFC標簽格式支持的。

使用WebNFC

比方說，你需要管理你店里的庫存。你可以用WebNFC建立一個庫存管理網站，它可以將數據讀/寫到你庫存的NFC標簽上。

可能性是無窮的。這是一個將許多事情自動化的機會，使我們的日常工作更有效率。

與WebHID相似，你可以使用下面的代碼片段檢查WebNFC支持。

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

安全注意事項

作為一項安全預防措施，Web NFC僅適用于頂級框架和安全瀏覽環境(僅HTTPS)。

如果實現WebNFC的網頁消失或不可見，所有與NFC標簽的連接將被暫停。當頁面再次變得可見時，這些將被恢復。頁面可見性API(Page Visibility API)幫助你識別NFC操作的連接狀態。

瀏覽器兼容性

到目前為止，Chrome Android僅支持WebNFC。

接下來，讓我們一起看看WebUSB API。

3.什么是WebUSB?

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和安卓設備上的Chrome的支持。

有關WebUSB API的更多詳細信息，可以參考Web上的訪問USB設備。

總結

無論是你的網站與你的硬件互動，還是你的硬件能與網絡應用互動，這都是一個雙贏的局面，因為他們不需要再安裝特殊的驅動或軟件來連接。

在我看來，這是一個非常酷的新功能，將使生活變得更容易。

原文：https://blog.bitsrc.io/new-standards-to-access-user-device-hardware-using-javascript-86b0c156dd3d

作者：Viduni Wickramarachchi

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。