[[402093]]

WebHID，WebNFC和WebUSB開辟了新的途徑，可以與用戶用于Web應(yīng)用程序的設(shè)備硬件進(jìn)行交互。

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

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

1.什么是WebHID?

在將HID(人機(jī)界面設(shè)備)集成到軟件中時(shí)，開發(fā)人員面臨的一個(gè)主要問題是，軟件應(yīng)適應(yīng)大量的品種;舊設(shè)備、新設(shè)備、常見的型號(hào)、不常見的型號(hào)等。

WebHID通過提供一個(gè)在JavaScript中實(shí)現(xiàn)設(shè)備特定邏輯的API來解決這個(gè)問題。

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

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

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

應(yīng)用程序?qū)嵤￤ebHID連接設(shè)備后，將顯示以下提示。

你需要做的是，選擇正確的設(shè)備并點(diǎn)擊連接。就這么簡單!

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

安全注意事項(xiàng)

我相信這是在發(fā)現(xiàn)WebHID能做什么之后想到的事情。

該API的開發(fā)采用了《控制對(duì)強(qiáng)大的網(wǎng)絡(luò)平臺(tái)功能的訪問》中定義的核心原則，包括用戶控制、透明度和人體工程學(xué)。此外，一次僅允許一個(gè)HID設(shè)備連接。

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

瀏覽器兼容性

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

接下來讓我們看一下WebNFC。

2.什么是WebNFC?

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

有了WebNFC，現(xiàn)在你可以讀取或?qū)懭隢FC標(biāo)簽，當(dāng)它在你的設(shè)備范圍內(nèi)。這是通過NDEF (NFC數(shù)據(jù)交換格式)完成的，它是由NFC標(biāo)簽格式支持的。

使用WebNFC

比方說，你需要管理你店里的庫存。你可以用WebNFC建立一個(gè)庫存管理網(wǎng)站，它可以將數(shù)據(jù)讀/寫到你庫存的NFC標(biāo)簽上。

可能性是無窮的。這是一個(gè)將許多事情自動(dòng)化的機(jī)會(huì)，使我們的日常工作更有效率。

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

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

安全注意事項(xiàng)

作為一項(xiàng)安全預(yù)防措施，Web NFC僅適用于頂級(jí)框架和安全瀏覽環(huán)境(僅HTTPS)。

如果實(shí)現(xiàn)WebNFC的網(wǎng)頁消失或不可見，所有與NFC標(biāo)簽的連接將被暫停。當(dāng)頁面再次變得可見時(shí)，這些將被恢復(fù)。頁面可見性API(Page Visibility API)幫助你識(shí)別NFC操作的連接狀態(tài)。

瀏覽器兼容性

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

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

3.什么是WebUSB?

WebUSB API允許你使用JavaScript與USB端口通信，從Chrome 61開始可用。

然而，你可能會(huì)想，我們?nèi)绾卧L問每個(gè)USB設(shè)備的相關(guān)驅(qū)動(dòng)程序，對(duì)嗎?在WebHID API的支持下，它允許硬件制造商為其硬件設(shè)備建立跨平臺(tái)的JavaScript SDK。

與上面討論的API類似，對(duì)WebUSB的支持可以用下面的代碼片斷來檢測。

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

安全

在安全方面有許多控制措施來保護(hù)未經(jīng)授權(quán)的USB訪問，而且它只在支持HTTPS的安全上下文中工作，以保護(hù)傳輸中的任何數(shù)據(jù)。此外，標(biāo)準(zhǔn)的瀏覽器同意程序是用來請(qǐng)求和授予訪問權(quán)的。

調(diào)試WebUSB API相關(guān)的任務(wù)也可以通過內(nèi)部的chrome://device-log頁面進(jìn)行，該頁面列出所有連接的USB設(shè)備和相關(guān)的事件。

瀏覽器兼容性

WebUSB得到了Chrome瀏覽器、桌面上的Edge和安卓設(shè)備上的Chrome的支持。

有關(guān)WebUSB API的更多詳細(xì)信息，可以參考Web上的訪問USB設(shè)備。

總結(jié)

無論是你的網(wǎng)站與你的硬件互動(dòng)，還是你的硬件能與網(wǎng)絡(luò)應(yīng)用互動(dòng)，這都是一個(gè)雙贏的局面，因?yàn)樗麄儾恍枰侔惭b特殊的驅(qū)動(dòng)或軟件來連接。

在我看來，這是一個(gè)非?？岬男鹿δ埽瑢⑹股钭兊酶菀?。

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

作者：Viduni Wickramarachchi

本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開發(fā)者公眾號(hào)。