🎚️ 👩‍🚒 💪🏿 独自のBluetooth Low Energyデバイス用のWebアプリケーションを作成する方法は？ 💋 👨🏾‍⚖️ 🍈

数週間前、楽しみのために、単純なロボットアーム（マニピュレーター）を組み立て、スマートフォンからBluetooth経由で制御をねじ込むことにしました。ネイティブモバイルアプリケーションの開発経験はまだありませんが、 Apache Cordovaにはすでに精通していますが 、 プログレッシブWebアプリのチップで味付けされたWeb Bluetooth APIを使用することは興味深いでしょう。

猫の下をリードするアトラクションの写真

一見すると、キーワードに関する十分な記事があるように見えるかもしれません：Web Bluetooth 仕様、例付きのGoogle Developersブログの詳細な記事、 Bluetooth Low Energyの詳細な分析、さまざまなBLEデバイスのリバースエンジニアリングプロトコルの例、そして点滅する「スマート」ライト、フィットネスブレスレットからブラウザから直接データを受信する- 何が問題になる可能性がありますか？

だから、自分のデバイスを作り、ブラウザから彼とチャットしようとするまで、私は考えた。深く掘り下げることはせず、実際の経験とコードを共有するだけです。個人的には3週間前に非常に役立つでしょう:)

問題

そのため、デバイスを組み立て、Bluetoothモジュールを装備してブラウザーからアクセスすることにしました。以下では、例として、BluetoothモジュールをArduino Unoに接続する様子を示します。もちろん、Arduinoベースのデバイスもありますが、もちろん、 STM 、 Raspberry 、 ESP8266などを使用しても基本的な違いはありません。重要なことは、コントローラーがUARTプロトコルを介してBluetoothモジュールと連携することです（ GeektimesまたはWikipediaを参照）。

私のように、古き良きHC-05 Bluetoothモジュールを既にデバイスに固定し、ファームウェアをダウンロードし、Googleのサンプルの一部を起動し、ブラウザーがデバイスを検出しない理由を理解できない場合、失望させます：Web Bluetoothは「Bluetooth 4標準」のみをサポートします。

これが記事を書く理由です。私のように、すぐにBLEモジュール（たとえばHM-10など）を備えた最寄りのストアから満足のいく状態で戻ると、まったく異なる方法で動作し、最も重要なことには、シリアルポートプロファイル（ シリアルポートプロファイル 、SPP、 Baumanライブラリの詳細）をサポートします。これにより、バイトを前後に不用意に追いかけることに慣れています。

Bluetooth Low Energyの概念、特にGeneric Attribute Profile （GATT）については既にご存知かもしれませんが、ここで重要なことを簡単に説明してみましょう。自作のシリアルプロトコルではなく、デバイスがアプリケーションのセットを提供する必要があります接続されたデバイスが読み取りおよび/または変更できる「特性」。

たとえば、ロボットアームを使用すると、3つの座標（数値X、Y、Z）で空間を移動し、爪を開く（0）または閉じる（1）ことができます。そのため、接続されたデバイスが必要な値を認識、読み取り、書き込みできる4つの特性を読み書きするようにBLEモジュールを構成する必要があります。

これは素晴らしいことですが、これは悪いことです。「近隣店」またはAliexpressで入手できる通常のBLEレベルの「趣味」モジュール：HM-10、JDY-08、AT-09、CC41-A、またはその他のサービスや機能を構成する機能はありません。

代わりに、シリアルポートをエミュレートする特性を1つだけ提供し、それに書き込むすべてのもの、モジュールはTXを介してコントローラーに送信し、コントローラーからモジュールのRXに送信するすべては接続されたデバイスに送信されます。ちなみに、BLE特性に固有の20バイトという制限があります。

したがって、Web Bluetoothは一般的な属性のプロファイルの使用に限定されているという事実にもかかわらず、実際には「家庭」で使用するためにシリアルポートプロファイルを作成する必要があります。

Bluetooth Low Energyモジュールの構成

まず、BLEモジュールを構成します。何をどのように知っていれば、それほど時間はかかりません。たまたま、 テキサスインスツルメンツのCC2541チップ上のCC41-Aモジュールを手にしたので、「近くの店」で340ルーブルかかりました。したがって、例として、その構成を正確に説明しますが、本質は同様のチップを使用する他のモジュールに共通です。

HM-10の例のBLEモジュールのピン配列、クリック可能

USB-TTLコンバーターをお持ちの場合は、BLEモジュールを接続するだけで、COMポートを介してコンピューターからモジュールに直接アクセスできます。モジュールの説明に注意してください。3.3Vロジックで動作する可能性があるため、TX-RXおよびRX-TXラインでは、 EasyElectronicsの味と色に電圧レベルシフターを使用する必要があります。 CC41-Aモジュールは、「LEVEL：3.3V」と表示されていますが、5Vロジックに完全に対応しています。

BLEモジュールをUSB-TTLコンバーターに接続、クリック可能

コンバーターの代わりに、最も単純なシリアルブリッジを使用してコントローラーを使用できます。コントローラーは、あるシリアルポートに送信したものをすべて別のシリアルポートに送信します。 Arduino Unoの場合、 SoftwareSerialライブラリを使用する必要があります。

Arduino Unoのスケッチ例

#include <SoftwareSerial.h> SoftwareSerial SerialBt(2, 3); void setup() { Serial.begin(9600); SerialBt.begin(9600); } void loop() { if (SerialBt.available()) { Serial.write(SerialBt.read()); } if (Serial.available()) { SerialBt.write(Serial.read()); } }

BLEモジュールをArduino Unoに接続、クリック可能

ターミナルプログラムを実行し（Arduino IDEからシリアルモニターを使用できます。私はBrayのターミナルを使用します）、標準設定のBLEモジュールがハングするCOMポートに接続します。

ボーレート： 9600
データビット： 8
パリティ：なし
ストップビット： 1
ハンドシェイク：なし

スタンバイモードでは、モジュールはキャリッジリターンとラインフィードで終わるATコマンドに応答します（シリアルモニターのCR+LF

、「NLとCRの両方」オプション）。一部のBLEモジュールはデフォルトで異なる速度で実行されます（たとえば、38400）。一部のモジュールはボード上のボタンをクリックした後に構成モードに入ります。一部のモジュールではコマンドが大文字である必要はありません。具体的にはモジュールの仕様を確認してください。

BLEモジュールの構成中の端末プログラムのウィンドウ、

クリック可能

ATコマンドを送信して接続を確認しましょう。モジュールは「OK」と答えるはずです-それですべてが整います。実際、モジュールがスレーブモードで動作し、マスターデバイスが接続されるのを待機し、サービスUUIDが0xFFE0

で、特性UUIDが0xFFE1

設定されていることを確認するだけで十分です。これは将来必要になります。私のモジュールで動作するいくつかのコマンド：

AT

ヘルスチェック。
AT+HELP

すべてのコマンドの出力。
AT+DEFAULT

工場出荷時設定にリセットします。
AT+RESET

-ソフトリブート。
AT+ROLE

出力モード。
AT+ROLE0

スレーブモードの設定。
AT+NAME

モジュール名の出力。
AT+NAMESimon

モジュール名をSimon

設定します。
AT+PIN

ペアリング用のPINコード（パスワード）を出力します。
AT+PIN123456

-PINコードを123456

設定。
AT+UUID

サービスのUUIDの出力。
AT+UUID0xFFE0

サービスのUUIDを0xFFE0

として0xFFE0

。
AT+CHAR

-UUID特性を出力します。
AT+CHAR0xFFE1

-UUID特性を0xFFE1

として設定します。

これで、たとえば、 Characteristic Properties Sampleページから、サービスとして「0xFFE0」を指定し、特性として「0xFFE1」を指定して、BLEモジュールへの接続を試みることができます。または、通知サンプルページで端末からブラウザに何かを送信することもできます。

端末から送信された特性とデータに関する情報の受信はクリック可能です

Webアプリケーションの作成

ウォームアップは終了しました。最も興味深いものに進みます！

コンセプト

デバイスの管理の概念を検討することを提案します。ブラウザーの通常のHTMLページで、デバイスとの対話を実装するさまざまなコントロールを使用して特定のUIを作成します。

ロボットアームを制御するためのUIアプリケーションの例、

クリック可能

たとえば、3つの座標で移動し、爪を開閉するロボットアームの場合、3つの数値スライダーまたは2Dサーフェスであり、クリックするとXおよびY値が計算され、1つのスライダーがZ軸とボタンに沿って移動します開閉爪。やかんの場合は、「ボイル」ボタンを作成できます。これがラジコン機の場合、ボタンを「進む」、「戻る」、「左」、「右」、「ヘッドライトのオン/オフ」、「信号を送る」などを行うことができます。

ボンネットの下で何が起こっているかの全体像はクリック可能です

JavaScriptで特定のUI要素の状態を押したり変更したりするときにハンドラーをハングさせることにより、Web Bluetooth APIを介してデバイスに送信するメッセージを作成します。 BLEモジュールはメッセージを受信し、UARTを介してコントローラーに送信し、コントローラーはメッセージを解析し、必要なアクションを実行し、同じUARTを使用してメッセージまたは応答の形式でBLEモジュールに返信できます。その後、モジュールは接続されたデバイスに送信し、JSを使用して応答を受信しますブラウザ

たとえば、ボタンをクリックしてクローを閉じると、 onclick

ボタンハンドラーが起動し、メッセージGRIPPER=CLOSE

が送信されます。コントローラーはメッセージを受信し、必要なものを理解し、クローを閉じてメッセージGRIPPER=CLOSED

を送り返します。このメッセージを処理すると、JSで爪の状態が記憶され、ボタンのテキストが「開く」に変更されます。

挑戦する

HTMLページ（UI）を作成し、JavaScriptイベントハンドラーを単純に操作することはそれほど難しい問題ではなく、Webテクノロジーに関する十分な基礎知識があります。したがって、特定のデバイスから抽象化し、デバイスに接続してメッセージを交換するターミナルアプリケーションを作成することをお勧めします。

また、Bluetooth Low Energyデバイスに接続し、接続が失われた場合に再接続し、20バイトのBLE特性の長さの制限をバイパス するプロセスのロギングを実装します。

最後に、通常のHTMLページをプログレッシブWebアプリケーション （ Google Developersの Progressive Web Apps、英語版のWikipedia ）に変換します。これは、スマートフォンのデスクトップにインストールし、インターネットがなくても使用できます。

HTMLページとデバイス、安定した接続、シンプルなAPIの間でメッセージを交換する機会があり、ニーズに合わせてアプリケーションを調整することは難しくありません。

準備する

お気に入りのIDEに加えて、前に構成した作業用の「デバイス」が必要です。これは、コンピューターのターミナルプログラムを介してリアルタイムでメッセージを送受信し、アプリケーションをテストするのに役立ちます。

Web Bluetooth APIは、 Chrome 56以降およびOpera 43 以降でデフォルトで使用可能です。また、Google Developersの記事では、Linuxではchromeを有効にする必要があると述べています：// flags /＃enable-experimental-web-platform-features flagとブラウザを再起動

最後の重要なポイント：Webアプリケーションは、 HTTPS （ GitHub Pagesを使用できます）またはhttp：// localhostで開く必要があります -これらはセキュリティ要件です。

UI

アプリケーションは、1つのHTML index.html

ページ、1つのstyles.css

、および1つのmain.js

ファイルで構成され、すべての魔法が発生します。

デバイスに接続するためのボタン、切断ボタン、メッセージ用のdivコンテナ、およびテキストフィールドと「送信」ボタンで構成される送信フォームを作成します。

index.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="styles.css" rel="stylesheet"> </head> <body> <button id="connect" type="button">Connect</button> <button id="disconnect" type="button">Disconnect</button> <div id="terminal"></div> <form id="send-form"> <input id="input" type="text"> <button type="submit">Send</button> </form> <script src="main.js"></script> </body> </html>

divコンテナでは、接続ログ、着信および発信メッセージを次の形式で表示します。

 <div id="terminal"> <div>  ...</div> <div class="out"> </div> <div class="in"> </div> </div>

どのメッセージが発信されたのかを推測しないために、スタイルの色でそれらを分けます。

styles.css

 #terminal div { color: gray; } #terminal div.out { color: red; } #terminal div.in { color: blue; }

ご覧のとおり、特別なものはありません。インターフェイスの準備ができました:)

イベントハンドラー

main.js

さらに作業が行われmain.js

UI要素へのリンクを取得し、接続ボタンと切断ボタンをクリックしてフォームを送信することにより、ハンドラーを切断します。

 //     UI let connectButton = document.getElementById('connect'); let disconnectButton = document.getElementById('disconnect'); let terminalContainer = document.getElementById('terminal'); let sendForm = document.getElementById('send-form'); let inputField = document.getElementById('input'); //        Connect connectButton.addEventListener('click', function() { connect(); }); //        Disconnect disconnectButton.addEventListener('click', function() { disconnect(); }); //     sendForm.addEventListener('submit', function(event) { event.preventDefault(); //    send(inputField.value); //     inputField.value = ''; //    inputField.focus(); //      }); //   Bluetooth      function connect() { // } //     function disconnect() { // } //     function send(data) { // }

デバイス接続

完全な接続アルゴリズムは、いくつかの段階で構成されています。

Bluetoothデバイスの要求：ブラウザは、最も近いデバイスを検索して選択するためのダイアログを開始し、ユーザーが選択を行い、アプリケーションコードがオブジェクトを受け取ります。
アプリケーションコードからデバイスに接続します。
1. 一般属性プロファイルサーバー（GATTサーバー）への接続、
2. 適切なサービスを取得し、
3. 所望の特性を取得します。
特性の変更に関する通知を含める-デバイスからメッセージを受信する必要があります。

コードで実行してみましょう：

 //     let deviceCache = null; //   Bluetooth      function connect() { return (deviceCache ? Promise.resolve(deviceCache) : requestBluetoothDevice()). then(device => connectDeviceAndCacheCharacteristic(device)). then(characteristic => startNotifications(characteristic)). catch(error => log(error)); } //   Bluetooth  function requestBluetoothDevice() { // } //    ,     function connectDeviceAndCacheCharacteristic(device) { // } //       function startNotifications(characteristic) { // } //    function log(data, type = '') { // }

Promiseのconnect()

関数では、接続ステップに対応するチェーン（Promiseオブジェクトを返す関数のチェーン）を実装しました。

また、変数deviceCache

導入しました。この変数には、ユーザーが選択したデバイスのオブジェクトを後で書き留めて、切断した場合に再接続する対象を確認します。

connect()

関数の本文の最初の行で、三項演算子はdeviceCache

オブジェクトで実行されるPromiseがゼロに等しくない場合は直ちに作成し、そうでない場合はBluetoothデバイスを選択するための要求関数を呼び出します。したがって、ユーザーが既にデバイスに接続している場合、次に「接続」ボタンをクリックすると、デバイス選択ダイアログは表示されません。

いずれかの段階でエラーが発生した場合、 log()

関数を使用して端末に出力しますが、これも後で実装します。

Bluetoothデバイスリクエスト

Bluetoothデバイスの選択を要求するには、関心のあるBluetoothデバイスを記述する必須の引数として構成オブジェクトを指定してnavigator.bluetooth.requestDevice()

関数を呼び出す必要があります。名前、サービスごとにフィルターを使用できますが、すべてのデバイスを受け入れることができますが、使用するサービスを指定する必要があります。そうしないと、ブラウザーはアクセスを提供しません。

 //   Bluetooth  function requestBluetoothDevice() { log('Requesting bluetooth device...'); return navigator.bluetooth.requestDevice({ filters: [{services: [0xFFE0]}], }). then(device => { log('"' + device.name + '" bluetooth device selected'); deviceCache = device; return deviceCache; }); }

使用するBLEモジュールが構成されたUUID 0xFFE0

サービスを提供するすべてのデバイスをリクエストします。ユーザーがデバイスを選択すると、デバイスオブジェクトを使用してPromiseが実行され、前述のキャッシュに書き込み、さらに戻ります。

デバイスへの接続、サービスオブジェクトと特性の受信

 //    let characteristicCache = null; //    ,     function connectDeviceAndCacheCharacteristic(device) { if (device.gatt.connected && characteristicCache) { return Promise.resolve(characteristicCache); } log('Connecting to GATT server...'); return device.gatt.connect(). then(server => { log('GATT server connected, getting service...'); return server.getPrimaryService(0xFFE0); }). then(service => { log('Service found, getting characteristic...'); return service.getCharacteristic(0xFFE1); }). then(characteristic => { log('Characteristic found'); characteristicCache = characteristic; return characteristicCache; }); }

私たちは、それ自体を語るシンプルなPromiseチェーンを実行します。 deviceCache

変数は、 deviceCache

と同様に、受信した特性オブジェクトを保存します。データを書き込む、つまり、ブラウザからデバイスにメッセージを送信する必要があります。

getPrimaryService()

およびgetCharacteristic()

関数は、BLEモジュールが機能するように構成されている引数としてUUIDを使用します。

機能変更通知を有効にする

 //       function startNotifications(characteristic) { log('Starting notifications...'); return characteristic.startNotifications(). then(() => { log('Notifications started'); }); }

特性オブジェクトのstartNotifications()

メソッドを参照して、特性変更イベントでハンドラーをハングさせるだけで十分ですが、それについては後で詳しく説明します。

ターミナル出力

端末への出力機能を実装して、今すぐデバイスへの接続をテストします。

 //    function log(data, type = '') { terminalContainer.insertAdjacentHTML('beforeend', '<div' + (type ? ' class="' + type + '"' : '') + '>' + data + '</div>'); }

insertAdjacentHTML()

メソッドを使用して、ターミナルのdivコンテナの最後にtype

引数で指定されたクラスを持つdivを挿入します。これは非常に簡単です。

テスト中

ブラウザでページを開き、「接続」ボタンをクリックすると、デバイス選択ダイアログが起動します。デバイスに接続すると、接続プロセスに関するメッセージが端末に表示されます。

デバイスの選択と接続、クリック可能

その後、どこにも書かれていない落とし穴がいくつか見つかりました。サービスメッセージの出力は、問題の診断と解決に役立ちました。

1つ目は、 Mi Bandが接続されている電話機からデバイスに接続し、BLEで動作し、近接している場合、接続は非常にまれでしたが、接続された場合、ほとんどすぐに脱落したことです。これはネイティブアプリケーションでも起こりました。私はMi Bandを遠くに連れて行こうとしました-それは助けにはなりませんでした。ブレスレットを解くのではなく、別のスマートフォンを使用しています。同様の問題が発生した場合は、スマートフォンと同時に通信するデバイスに注意してください。

2番目の石はおそらく石ではなく、通常は最初の接続中に現れる機能です：明白な理由もなく接続が突然失われる可能性があり、ブラウザがサポートを提供しないため、再接続機能を独自に実装する必要があります。

自動再接続

切断を追跡するために、Web Bluetoothはgattserverdisconnected

イベントを提供します。 gattserverdisconnected

イベントのハンドラーはデバイスオブジェクトでハングする必要があります。最も論理的な場所は、デバイス選択機能です。

 //   Bluetooth  function requestBluetoothDevice() { log('Requesting bluetooth device...'); return navigator.bluetooth.requestDevice({ filters: [{services: [0xFFE0]}], }). then(device => { log('"' + device.name + '" bluetooth device selected'); deviceCache = device; //   deviceCache.addEventListener('gattserverdisconnected', handleDisconnection); return deviceCache; }); } //   function handleDisconnection(event) { let device = event.target; log('"' + device.name + '" bluetooth device disconnected, trying to reconnect...'); connectDeviceAndCacheCharacteristic(device). then(characteristic => startNotifications(characteristic)). catch(error => log(error)); }

これで、デバイスに接続し、電源をオフにしてBluetooth接続が失われた場合、ブラウザーは1回再接続を試みます。

再接続を試行、クリック可能

デバイスから切断する

切断する前に、割り当てられたハンドラーをgattserverdisconnected

イベントから削除することを忘れないことが重要です。そうしないと、ブラウザーは単に再接続します。

 //     function disconnect() { if (deviceCache) { log('Disconnecting from "' + deviceCache.name + '" bluetooth device...'); deviceCache.removeEventListener('gattserverdisconnected', handleDisconnection); if (deviceCache.gatt.connected) { deviceCache.gatt.disconnect(); log('"' + deviceCache.name + '" bluetooth device disconnected'); } else { log('"' + deviceCache.name + '" bluetooth device is already disconnected'); } } characteristicCache = null; deviceCache = null; }

deviceCache

リセットすることはできません。次に「接続」ボタンをクリックすると、デバイス選択ダイアログは表示されず、代わりに前のデバイスに接続します。

無効化、クリック可能

データ検索

データは、BLE特性の値が変化したときに発生する通知メカニズムを使用して、デバイスから非同期的に受信されます。関連するイベントのcharacteristicvaluechanged

特性のみを購読する必要があります。これは、通知を有効にした後に行う必要があります。また、デバイスがオフになっているときに、特性からプロセッサを削除することも正しいでしょう。

 //       function startNotifications(characteristic) { log('Starting notifications...'); return characteristic.startNotifications(). then(() => { log('Notifications started'); //   characteristic.addEventListener('characteristicvaluechanged', handleCharacteristicValueChanged); }); } //     function disconnect() { if (deviceCache) { log('Disconnecting from "' + deviceCache.name + '" bluetooth device...'); deviceCache.removeEventListener('gattserverdisconnected', handleDisconnection); if (deviceCache.gatt.connected) { deviceCache.gatt.disconnect(); log('"' + deviceCache.name + '" bluetooth device disconnected'); } else { log('"' + deviceCache.name + '" bluetooth device is already disconnected'); } } //   if (characteristicCache) { characteristicCache.removeEventListener('characteristicvaluechanged', handleCharacteristicValueChanged); characteristicCache = null; } deviceCache = null; } //   function handleCharacteristicValueChanged(event) { let value = new TextDecoder().decode(event.target.value); log(value, 'in'); }

event.target.value

は、デバイスからのメッセージがあるArrayBufferを含むDataViewオブジェクトです。 TextDecoder

（ MDN、英語のみ）を使用して、バイト配列をテキストにオーバーライドします。

端末からデータを送信し、ブラウザで受信、クリック可能

テストでは、デバイスからのメッセージの受信は、 CR

、 LF

行末の有無にかかわらず、安定して機能することが示されています。長いメッセージは完全に届きますが、20バイトの倍数に分割されます。

中間バッファーの紹介

20バイトを超えるメッセージのサポートは必要ないかもしれませんが、完全を期すために、この制限を回避しましょう。考え方は簡単です。セパレータ文字が受信されるまで、着信バッファを中間バッファに書き込みます。区切り文字を受け取ったら、3番目の関数を呼び出して、バッファーからデータを渡し、その後の書き込みのためにバッファーをクリアします。

区切り文字は、文字列（ LF

、 \n

）を供給するために論理的です。また、メッセージの最初と最後から空白を削除すると便利な場合があります。

 //      let readBuffer = ''; //   function handleCharacteristicValueChanged(event) { let value = new TextDecoder().decode(event.target.value); for (let c of value) { if (c === '\n') { let data = readBuffer.trim(); readBuffer = ''; if (data) { receive(data); } } else { readBuffer += c; } } } //    function receive(data) { log(data, 'in'); }

デバイス固有のWebアプリケーションを作成する場合、 receive()

関数をニーズに合わせて変更し、デバイスからの確実なメッセージで作業していることを確認できます。

中間バッファの導入後に端末からデータを送信し、ブラウザで受信、クリック可能

データを送信する

デバイスへのデータの送信は、特性に値を書き込むことによって、より具体的には、引数としてwriteValue()

特性オブジェクトのメソッドを呼び出すことによって実行されArrayBuffer

ます。文字列を変換するArrayBuffer

最も簡単な方法はTextEncoder

（英語のみのMDN）です。

 //     function send(data) { data = String(data); if (!data || !characteristicCache) { return; } writeToCharacteristic(characteristicCache, data); log(data, 'out'); } //     function writeToCharacteristic(characteristic, data) { characteristic.writeValue(new TextEncoder().encode(data)); }

念のため、グローバルオブジェクトを使用してデータを文字列型にキャストしますString

。

このような実装では、20バイトの制限も適用されます。スコープを超えるものはすべて切り捨てられます。したがって、メッセージが20バイトより長い場合は、メッセージを断片に分割し、少し遅れて順次送信する価値があります。

 //     function send(data) { data = String(data); if (!data || !characteristicCache) { return; } data += '\n'; if (data.length > 20) { let chunks = data.match(/(.|[\r\n]){1,20}/g); writeToCharacteristic(characteristicCache, chunks[0]); for (let i = 1; i < chunks.length; i++) { setTimeout(() => { writeToCharacteristic(characteristicCache, chunks[i]); }, i * 100); } } else { writeToCharacteristic(characteristicCache, data); } log(data, 'out'); }

コントローラー側でのメッセージの処理を容易にするために、送信されたメッセージの最後に改行文字（\n

）を追加します。

次に、メッセージは、キャリッジリターン（CR

、\r

）およびラインフィード（LF

、\n

）を正しく処理する正規表現を使用して断片に分割され、その後、最初の部分がすぐに送信され、100ミリ秒の倍数の遅延を持つタイマーが他を送信するように設定されます

端末とブラウザ間のデータ交換、クリック可能

うまくいく！デバイスとの完全に機能する双方向のデータ交換を取得しましたが、それはすべてJSです。

プログレッシブWebアプリ

デバイスがどのような状態になるかを事前に知ることはできません。そのため、インターネットなしで作成されたWebアプリケーションを操作できると便利です。そして、ここでプログレッシブWebアプリの概念が役立ちます（英語でGoogle DevelopersまたはWikipediaの詳細を参照）。簡単に言えば、これらはユーザーにとって通常またはモバイルアプリケーションのように見えるWebサイトです。PWAテクノロジーを使用すると、最初にWebサイトにアクセスしたときに、スマートフォンのデスクトップにアプリケーションとしてインストールし、オフラインで作業できます。

アイコン

アイコンは、デスクトップにアプリケーションをインストールするために必要です。個人的に、私はrealfavicongenerator.netを使用します -適切な画像をアップロードすると、ジェネレーターはさまざまなデバイスのアイコンを調整するように提供します。

「Android Chromeのファビコン」セクションで、「アセット」タブに切り替えて「文書化されたすべてのアイコンを作成」を選択することをお勧めします。そうしないと、Chromeはデバイスに最も近いサイズのデスクトップアイコンを生成します。

セットアップが完了したら、「生成」ボタンをクリックし、「Faviconパッケージ」をダウンロードして、Webページの横に解凍します。また、ジェネレータによって提案されたコードをにコピーします<head>

。

マニフェスト

アイコンと一緒に、ジェネレーターはマニフェストのドラフトを親切に提供してくれました- manifest.json

：

 { "name": "", "icons": [ ... ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }

プロパティでアプリケーションの名前を指定し、12文字以内の短縮名を含むプロパティname

を追加しますshort_name

。

配列にはicons

すでに生成されたすべてのアイコンがリストされており、プロパティdisplay

にはアプリケーションの表示モードが含まれています。standalone

これは、ネイティブアプリケーションと可能な限り類似した、ブラウザUI要素なしでWebアプリケーションが起動することを意味します-これが必要なことです。

ブラウザはツールバーをcolorで色付けしtheme_color

、アプリケーションをロードするときにスプラッシュ画面のbackground_color

背景として使用されます。マニフェストを変更するときは、必ずmetaタグも変更してください。また、プロパティを追加する価値があると等しいですtheme_color

<meta name="theme-color" content="#ffffff">

start_url

scope

./

そのため、最初にアプリケーションを起動すると、メインページで開き、次にWebアプリケーションのナビゲーション領域を現在のページとサブページに制限します。これは、アプリケーションファイルがWebサイトのルートディレクトリにない場合に役立ちます。

サービスワーカー

Service Workerを使用すると、アプリケーションに必要なファイルをキャッシュし、インターネットがない場合にそれらを使用できます。Service Worker Toolboxは、sw-toolbox.jsとcompanion.jsをダウンロードし、それらを横に配置しindex.html

て最後に追加するだけで、Service Workerをすばやく作成するのに役立ちます<body>

。

 <script src="companion.js" data-service-worker="sw.js"></script>

その後、sw.js

次のスクリプトを追加するだけでindex.html

、必要なファイルをキャッシュできます。

 importScripts('sw-toolbox.js'); toolbox.precache([ 'companion.js', 'index.html', 'main.js', 'styles.css', ]);

これで、ページだけでなく、実際のプログレッシブWebアプリケーションができました。

デスクトップへのアプリケーションの追加と起動、クリック可能

最終テスト、クリック可能

エピローグ

デバイスとブラウザ間の双方向通信チャネルを使用して、予算モジュールとクロスプラットフォームWebアプリケーションを備えた独自のBluetooth Low Energyデバイスの開発を開始するのはとても簡単で簡単です。

これで、デバイスのUIを特定のUIに変更し、必要なハンドラーを追加し、デバイスに通信プロトコルを実装し、...スマートフォンのアプリケーションのボタンを押すなどしてキッチンのやかんをオンにすることができます。

最終的なコードは、ファイルindex.html

、styles.css

、main.js

およびsw.js

利用可能ですここ。

ここで、変更されたWebターミナルアプリケーションを実行できます：loginov-rocks.github.io/Web-Bluetooth-Terminal-またはYouTubeでの動作を確認します。

にGitHubでは、BLEモジュールとのシリアル通信用のES6クラスと、実際にはWebターミナルリポジトリも個別に見つけることができます。

UPD：投票を追加しました。

独自のBluetooth Low Energyデバイス用のWebアプリケーションを作成する方法は？

目次

問題