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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可以用原生應(yīng)用來改變燈泡的顏色，這真是太棒了，但是我們怎樣在瀏覽器中做到這一點呢？事實證明，憑借我們剛剛學(xué)到的關(guān)于藍(lán)牙和 GATT 的知識，只需幾行JavaScript就可以改變燈泡的顏色，這要歸功 于WebBluetooth API。

我們來研究一下 WebBluetooth API。

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

在以下示例中，我們將過濾設(shè)備的名稱，因為我們只想查看名稱中包含前綴 PLAYBULB 的設(shè)備。我們還指定 0xff0f 作為我們想要使用的服務(wù)。由于 requestDevice() 函數(shù)返回一個promise，可以等待結(jié)果返回。

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

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

用戶必須通過選擇設(shè)備來手動連接。

在我們訪問設(shè)備之后，可以通過調(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)在就得到了可用于讀寫數(shù)據(jù)的特性：

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

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

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

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

我們已經(jīng)知道這個特殊的燈泡是如何工作的。 必須提供四個字節(jié)，每個LED一個。 每個字節(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ù)來從數(shù)組中提取單個字節(jié)。

最后，還有一種方法可以在設(shè)備值發(fā)生變化時收到通知。 這對于燈泡來說并不是很有用，但對于心率監(jiā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ā)生變化時及時獲得回調(diào)，必須使用參數(shù) characteristicvaluechanged 和回調(diào)函數(shù)調(diào)用特性上的 addEventListener() 函數(shù)。 每當(dāng)值發(fā)生變化時，將使用事件對象作為參數(shù)調(diào)用回調(diào)函數(shù)，并且我們可以從事件目標(biāo)的 value 屬性中獲取數(shù)據(jù)。 最后，再次從 ArrayBuffer 的 DataView 中提取單個字節(jié)。

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

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

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

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

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

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

歡迎閱讀本專欄其他高贊文章：

12個令人驚嘆的CSS實驗項目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

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

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現(xiàn)動畫效果

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

第三方CSS安全嗎？

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