摘要：可以調(diào)用函數(shù)并為函數(shù)提供配置對(duì)象，該對(duì)象含有關(guān)我們要使用哪個(gè)設(shè)備，以及都有哪些服務(wù)可用的信息。現(xiàn)在就得到了可用于讀寫(xiě)數(shù)據(jù)的特性寫(xiě)數(shù)據(jù)要寫(xiě)入數(shù)據(jù)，我們可以在特性上調(diào)用函數(shù)，以的形式傳遞想要寫(xiě)入的值，這是二進(jìn)制數(shù)據(jù)的存儲(chǔ)方法。

翻譯：瘋狂的技術(shù)宅
原文：https://www.smashingmagazine....

本文首發(fā)微信公眾號(hào)：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

摘要：通過(guò)漸進(jìn)式 Web 應(yīng)用（Progressive Web Apps）技術(shù)，你可以開(kāi)發(fā)成熟的 Web 應(yīng)用。 得益于大量新規(guī)范和新功能，以前需要在本機(jī)執(zhí)行的應(yīng)用，現(xiàn)在可以基于 Web 實(shí)現(xiàn)。 不過(guò)迄今為止，與硬件設(shè)備的交互仍然是遙不可及。 感謝 WebBluetooth 的出現(xiàn)，現(xiàn)在我們可以開(kāi)發(fā)能夠控制燈光、駕駛汽車(chē)甚至是無(wú)人機(jī)的 PWA。

通過(guò)PWA技術(shù)，Web 應(yīng)用越來(lái)越和本機(jī)應(yīng)用相差無(wú)幾。同時(shí) Web 應(yīng)用也有其額外的好處，比如隱私和跨平臺(tái)兼容性。

傳統(tǒng)的 Web 應(yīng)用與網(wǎng)絡(luò)上服務(wù)器的通信機(jī)制非常出色?，F(xiàn)在 Web 正在向本機(jī)應(yīng)用靠攏，所以我們還需要與本機(jī)應(yīng)用相同的功能。

過(guò)去幾年在瀏覽器中實(shí)現(xiàn)的新規(guī)范和功能的數(shù)量是驚人的。我們已經(jīng)有了處理3D的規(guī)范，例如 WebGL 和即將推出的 WebGPU。我們可以通過(guò)流式傳輸并生成音頻，來(lái)觀(guān)看視頻并將網(wǎng)絡(luò)攝像頭用作輸入設(shè)備。我們還可以使用WebAssembly 以幾乎原生的速度運(yùn)行代碼。此外，盡管 web 最初只是一種網(wǎng)絡(luò)媒體，但是它已經(jīng)轉(zhuǎn)向 service workers 的離線(xiàn)支持。

盡管這些功能非常強(qiáng)大，但是還有一個(gè)本機(jī)應(yīng)用的專(zhuān)屬領(lǐng)域：與設(shè)備進(jìn)行通信。這是我們長(zhǎng)期以來(lái)一直試圖解決的問(wèn)題，也是每個(gè)人可能會(huì)遇到的問(wèn)題。Web非常適合與服務(wù)器通信，但不適合與設(shè)備通信。例如，在網(wǎng)絡(luò)中設(shè)置路由器時(shí)，你可能需要輸入 IP 地址并通過(guò)純 HTTP 連接來(lái)使用 Web 界面，但是沒(méi)有任何安全保護(hù)。這不管是從體驗(yàn)上還是在安全性上都是非常糟糕的。最重要的是，你怎樣才能得到正確的IP地址呢？

當(dāng)我們嘗試創(chuàng)建一個(gè)試圖與設(shè)備通信的 PWA 時(shí)，HTTP 協(xié)議是我們遇到的第一個(gè)問(wèn)題。 PWA 只能只用 HTTPS 協(xié)議，而本地設(shè)備始終只使用 HTTP 。你還需要一個(gè) HTTPS 證書(shū)，并且為了獲得證書(shū)，還需要一個(gè)帶有域名的公共服務(wù)器（ 我正在談?wù)摫镜鼐W(wǎng)絡(luò)上無(wú)法訪(fǎng)問(wèn)的設(shè)備 ）。

因此，對(duì)于許多設(shè)備來(lái)說(shuō)，你需要使用本機(jī)應(yīng)用來(lái)設(shè)置并使用它們，因?yàn)楸緳C(jī)應(yīng)用不受 Web 平臺(tái)的限制，可以為其用戶(hù)提供愉快的體驗(yàn)。但是我并不想下載一個(gè) 500 MB 的程序來(lái)做到這一點(diǎn)。也許你擁有的設(shè)備已經(jīng)有幾年了，應(yīng)用程序從來(lái)沒(méi)有為支持你的新手機(jī)做過(guò)更新。也許你想使用臺(tái)式機(jī)或筆記本電腦，而制造商只提供一個(gè)移動(dòng)應(yīng)用。也不是一個(gè)理想的體驗(yàn)。

WebBluetooth 是一種新規(guī)范，已在 Chrome 和 Samsung Internet 中實(shí)現(xiàn)，它允許我們通過(guò)瀏覽器直接與Bluetooth Low Energy 設(shè)備進(jìn)行通信。 PWA 通過(guò)與 WebBluetooth 相結(jié)合，可以提供 Web 應(yīng)用的安全性和便利性，并具有直接與設(shè)備通信的能力。

由于通信范圍有限，音頻質(zhì)量差和配對(duì)上存在的問(wèn)題，藍(lán)牙的名聲比較差。但是，幾乎所有這些問(wèn)題都已成為過(guò)去式。 Bluetooth Low Energy 是一種現(xiàn)代規(guī)范，除了使用的無(wú)線(xiàn)頻段相同外，它和舊的藍(lán)牙規(guī)范幾乎沒(méi)有任何關(guān)系。每天有超過(guò) 1000 萬(wàn)臺(tái)設(shè)備提供藍(lán)牙支持，其中包括計(jì)算機(jī)和手機(jī)，還有各種設(shè)備，如心率和血糖監(jiān)測(cè)儀，物聯(lián)網(wǎng)設(shè)備，如燈泡和遙控汽車(chē)和無(wú)人機(jī)等玩具。

由于藍(lán)牙本身不是一種網(wǎng)絡(luò)技術(shù)，它使用了一些我們可能不太熟悉的詞匯。 先讓我們看看藍(lán)牙是如何工作的和一些涉及到的術(shù)語(yǔ)。

每個(gè)藍(lán)牙設(shè)備都是“中央設(shè)備”（Central device）或“外圍設(shè)備”（ Peripheral ）。 只有中央設(shè)備才能啟動(dòng)通信，并且只能與外圍設(shè)備通信。 中央設(shè)備可以是計(jì)算機(jī)或移動(dòng)電話(huà)。

外圍設(shè)備無(wú)法啟動(dòng)通信，只能與中央設(shè)備通信。 此外，同一時(shí)間外圍設(shè)備只能與一個(gè)中央設(shè)備通信。 外圍設(shè)備無(wú)法與其他外圍設(shè)備通信。

中央設(shè)備可以與多個(gè)外圍設(shè)備通信

中央設(shè)備可以同時(shí)與多個(gè)外圍設(shè)備通信，并且可以根據(jù)需要對(duì)消息進(jìn)行中繼。所以心率監(jiān)測(cè)器無(wú)法與你的燈泡進(jìn)行通信，但是你可以編寫(xiě)一個(gè)程序，該程序在接收心率的中央設(shè)備上運(yùn)行，如果心率超過(guò)某個(gè)閾值就將燈變?yōu)榧t色。

當(dāng)我們談?wù)?WebBluetooth 時(shí)，我們談?wù)摰氖撬{(lán)牙規(guī)范的一個(gè)特定部分，稱(chēng)為通用屬性配置文件（Generic Attribute Profile），它的縮寫(xiě)是GATT。 （顯然，GAP這個(gè)縮寫(xiě)已經(jīng)被占用了。）

在 GATT 的支持下，我們不再談?wù)撝醒朐O(shè)備和外圍設(shè)備，而是客戶(hù)端和服務(wù)器。你的燈泡是服務(wù)器。這可能和你的直覺(jué)相違背，但是如果你仔細(xì)想想，實(shí)際上是有道理的。燈泡提供服務(wù)，即光。就像瀏覽器連接到互聯(lián)網(wǎng)上的服務(wù)器一樣，你的手機(jī)或計(jì)算機(jī)也是連接到燈泡中 GATT 服務(wù)器的客戶(hù)端。

每個(gè)服務(wù)器都提供一個(gè)或多個(gè)服務(wù)。其中一些服務(wù)正式成為標(biāo)準(zhǔn)的一部分，但你也可以定義自己的服務(wù)。比如心率監(jiān)測(cè)器的規(guī)范中就定義了官方服務(wù)。但是燈泡就不是這樣，而且?guī)缀趺總€(gè)制造商都在試圖重新發(fā)明輪子。每項(xiàng)服務(wù)都有一個(gè)或多個(gè)特征。每個(gè)特征都有一個(gè)可以讀取或?qū)懭氲闹?。目前，最好將其視為一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象都具有值的屬性。

簡(jiǎn)化的服務(wù)和特征層次結(jié)構(gòu)。

與對(duì)象屬性不同，服務(wù)和特征不是由字符串標(biāo)識(shí)的。 每個(gè)服務(wù)和特性都有一個(gè)唯一的UUID，長(zhǎng)度為16 位或128位。嚴(yán)格的說(shuō)，16 位 UUID 是為官方標(biāo)準(zhǔn)保留的，但幾乎沒(méi)有人遵循這一規(guī)則。 最后，每個(gè)值都是一個(gè)字節(jié)數(shù)組。 藍(lán)牙中沒(méi)有樣式繁多的數(shù)據(jù)類(lèi)型。

讓我們看一個(gè)實(shí)際的藍(lán)牙設(shè)備：Mipow Playbulb Sphere。 你可以用 BLE Scanner 或 nRF Connect 等程序連接到設(shè)備并查看其所有服務(wù)和特征。 在這種情況下，我正在使用iOS的BLE掃描儀應(yīng)用程序。

視頻地址：https://player.vimeo.com/vide...

連接燈泡時(shí)首先看到的是服務(wù)列表。有一些標(biāo)準(zhǔn)化的服務(wù)，如設(shè)備信息服務(wù)和電池。但也有一些自定義服務(wù)。我對(duì)16 位 UUID 為 0xff0f 的服務(wù)特別感興趣。如果你打開(kāi)此服務(wù)，可以看到一長(zhǎng)串特征值。我不知道這些特征是做什么用的，因?yàn)樗鼈冎皇怯?UUID 識(shí)別，而且不幸的是它們可能定制服務(wù)的一部分，它們并不是標(biāo)準(zhǔn)化的，制造商沒(méi)有提供任何支持文檔。

UUID 為 0xfffc 的第一個(gè)特性似乎特別有趣。它的值為四個(gè)字節(jié)。如果我們將這些字節(jié)的值從 0x00000000 改為 0x00ff0000 ，則燈泡變?yōu)榧t色。將其改為 0x0000ff00 會(huì)將燈泡變?yōu)榫G色，修改為 0x000000ff 則變?yōu)樗{(lán)色。這些是RGB顏色，和 HTML 與 CSS 中使用的十六進(jìn)制顏色完全對(duì)應(yīng)。

第一個(gè)字節(jié)有什么作用？好吧，如果我們將值更改為 0xff000000 ，則燈泡會(huì)變成白色。燈泡包含四個(gè)不同的LED，通過(guò)更改這四個(gè)字節(jié)的值，我們可以創(chuàng)建想要的任何顏色。

可以用原生應(yīng)用來(lái)改變燈泡的顏色，這真是太棒了，但是我們?cè)鯓釉跒g覽器中做到這一點(diǎn)呢？事實(shí)證明，憑借我們剛剛學(xué)到的關(guān)于藍(lán)牙和 GATT 的知識(shí)，只需幾行JavaScript就可以改變燈泡的顏色，這要?dú)w功 于WebBluetooth API。

我們來(lái)研究一下 WebBluetooth API。

我們要做的第一件事就是從瀏覽器連接到設(shè)備?？梢哉{(diào)用函數(shù) navigator.bluetooth.requestDevice() 并為函數(shù)提供配置對(duì)象，該對(duì)象含有關(guān)我們要使用哪個(gè)設(shè)備，以及都有哪些服務(wù)可用的信息。

在以下示例中，我們將過(guò)濾設(shè)備的名稱(chēng)，因?yàn)槲覀冎幌氩榭疵Q(chēng)中包含前綴 PLAYBULB 的設(shè)備。我們還指定 0xff0f 作為我們想要使用的服務(wù)。由于 requestDevice() 函數(shù)返回一個(gè)promise，可以等待結(jié)果返回。

let device = await navigator.bluetooth.requestDevice({
    filters: [ 
        { namePrefix: "PLAYBULB" } 
    ],
    optionalServices: [ 0xff0f ]
});

當(dāng)我們調(diào)用此函數(shù)時(shí)，會(huì)彈出一個(gè)窗口，顯示符合過(guò)濾規(guī)則的設(shè)備列表。 現(xiàn)在必須手動(dòng)選擇我們想要連接的設(shè)備。這是出于安全和隱私的需要，并為用戶(hù)提供控制的權(quán)利。用戶(hù)決定是否允許 Web 應(yīng)用連接到設(shè)備，當(dāng)然還有已經(jīng)被允許連接的設(shè)備。 如果沒(méi)有用戶(hù)手動(dòng)選擇設(shè)備，Web 應(yīng)用則無(wú)法獲取設(shè)備列表或連接。

用戶(hù)必須通過(guò)選擇設(shè)備來(lái)手動(dòng)連接。

在我們?cè)L問(wèn)設(shè)備之后，可以通過(guò)調(diào)用設(shè)備 gatt 屬性上的 connect() 函數(shù)連接到 GATT 服務(wù)器并等待返回結(jié)果。

let server = await device.gatt.connect();

一旦我們連上服務(wù)器，就可以調(diào)用 getPrimaryService() 并傳遞服務(wù)的UUID，然后等待結(jié)果返回。

let service = await server.getPrimaryService(0xff0f);

然后使用特性的UUID作為參數(shù)調(diào)用服務(wù)上的 getCharacteristic() 并再次等待結(jié)果返回。

現(xiàn)在就得到了可用于讀寫(xiě)數(shù)據(jù)的特性：

let characteristic = await service.getCharacteristic(0xfffc);

要寫(xiě)入數(shù)據(jù)，我們可以在特性上調(diào)用函數(shù) writeValue() ，以 ArrayBuffer 的形式傳遞想要寫(xiě)入的值 ，這是二進(jìn)制數(shù)據(jù)的存儲(chǔ)方法。 我們不能使用常規(guī)數(shù)組的原因是常規(guī)數(shù)組中可以包含各種類(lèi)型的數(shù)據(jù)，甚至可以存在空洞。

由于我們無(wú)法直接創(chuàng)建或修改 ArrayBuffer，因此應(yīng)該使用“類(lèi)型化數(shù)組”。 類(lèi)型化數(shù)組種的每個(gè)元素總是相同的類(lèi)型，并且沒(méi)有任何漏洞。 在我們的例子中，將使用 Uint8Array，它是一個(gè)無(wú)符號(hào)的整數(shù)，因此不能包含任何負(fù)數(shù)，也它不能包含分?jǐn)?shù); 它是 8 位的，只能包含 0 到 255 之間的值。換句話(huà)說(shuō)：這個(gè)是一個(gè)字節(jié)數(shù)組。

characteristic.writeValue(
    new Uint8Array([ 0, r, g, b  ])
);

我們已經(jīng)知道這個(gè)特殊的燈泡是如何工作的。 必須提供四個(gè)字節(jié)，每個(gè)LED一個(gè)。 每個(gè)字節(jié)的值介于 0 到 255 之間，在這種情況下，我們只想使用紅色，綠色和藍(lán)色 LED，因此我們使用值 0 關(guān)閉白色LED。

要讀取燈泡的當(dāng)前顏色，可以使用 readValue() 函數(shù)并等待結(jié)果返回。

let value = await characteristic.readValue();
    
let r = value.getUint8(1); 
let g = value.getUint8(2);
let b = value.getUint8(3);

我們得到的值是 ArrayBuffer 形式的 DataView，它提供了一種從 ArrayBuffer 中獲取數(shù)據(jù)的方法。 在我們的例子中，可以使用 getUint8() 并以索引作為參數(shù)來(lái)從數(shù)組中提取單個(gè)字節(jié)。

最后，還有一種方法可以在設(shè)備值發(fā)生變化時(shí)收到通知。 這對(duì)于燈泡來(lái)說(shuō)并不是很有用，但對(duì)于心率監(jiān)測(cè)器來(lái)說(shuō)，我們需要不斷收到改變的值，而且并不希望每秒手動(dòng)輪詢(xún)這些值。

characteristic.addEventListener(
    "characteristicvaluechanged", e => {
        let r = e.target.value.getUint8(1); 
        let g = e.target.value.getUint8(2);
        let b = e.target.value.getUint8(3);
    }
);

characteristic.startNotifications();

要在值發(fā)生變化時(shí)及時(shí)獲得回調(diào)，必須使用參數(shù) characteristicvaluechanged 和回調(diào)函數(shù)調(diào)用特性上的 addEventListener() 函數(shù)。 每當(dāng)值發(fā)生變化時(shí)，將使用事件對(duì)象作為參數(shù)調(diào)用回調(diào)函數(shù)，并且我們可以從事件目標(biāo)的 value 屬性中獲取數(shù)據(jù)。 最后，再次從 ArrayBuffer 的 DataView 中提取單個(gè)字節(jié)。

由于藍(lán)牙網(wǎng)絡(luò)上的帶寬有限，我們必須通過(guò)調(diào)用特性上的 startNotifications() 來(lái)手動(dòng)啟動(dòng)這個(gè)通知機(jī)制。 否則，網(wǎng)絡(luò)將被不必要的數(shù)據(jù)淹沒(méi)。 此外，由于這些設(shè)備通常使用電池供電，因此沒(méi)有必要的數(shù)據(jù)通信會(huì)影響設(shè)備的電池壽命，所以?xún)?nèi)置無(wú)線(xiàn)發(fā)射器不需要常開(kāi)。

視頻地址：https://player.vimeo.com/vide...

本文已經(jīng)覆蓋了 WebBluetooth API 的90％。 只需調(diào)用幾個(gè)函數(shù)并發(fā)送 4 個(gè)字節(jié)，你就可以創(chuàng)建一個(gè)控制燈泡顏色的 Web 應(yīng)用。 如果再添加幾行，你甚至可以控制玩具車(chē)或駕駛無(wú)人機(jī)。 隨著越來(lái)越多的藍(lán)牙設(shè)備進(jìn)入市場(chǎng)，將產(chǎn)生無(wú)窮的可能性。

Bluetooth.rocks! Demos | (GitHub 上的源代碼)

“Web Bluetooth Specification,” Web藍(lán)牙社區(qū)

Open GATT Registry 藍(lán)牙低功耗設(shè)備的GATT非官方文檔。

歡迎閱讀本專(zhuān)欄其他高贊文章：

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級(jí)公司的前端面試都問(wèn)些什么

CSS Flexbox 可視化手冊(cè)

過(guò)節(jié)很無(wú)聊？還是用 JavaScript 寫(xiě)一個(gè)腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫(huà)效果

程序員30歲前月薪達(dá)不到30K，該何去何從

第三方CSS安全嗎？

談?wù)剆uper(props) 的重要性