JavaScript
Chrome
BLE
WebBluetooth

Web Bluetoothを実戦投入すると意外と使えたメモ

普段はIoTな製品開発をメインにしているため、JSも王道の斜め横くらいの使い方で楽しんでいる今日このごろ。そんななかで、なかなか触る機会がないであろうWeb Bluetoothをゴリゴリいじくり倒して実戦投入すると意外と使えたので、そのときにわかったことのメモをまとめておきます。Android Chromeがサポート環境だったため、そっち寄りのまとめになります。

なかなかチュートリアル以上のネタがネット上になかったので、他に同じ心境の方が出てきたときの助けになれば...:innocent:


Web Bluetoothの仕様とか参考にしたところ

ドキュメントは意外と更新頻度高いので、実装時期によっては意外とできなかったことができてたりします。


対応ブラウザ


  • Chrome


    • Mac

    • Windows


      • 要フラグ設定 chrome://flags/#enable-experimental-web-platform-features



    • Android



スクリーンショット 2018-09-06 17.57.05.png

※2018/09/06現在

Windowsはフラグが必要だったりサポート状況が芳しくなかったりするので、開発するアプリのサポート環境からは外したい。Android Chromeは、Mac Chromeとサポート状況が変わらないので、意外と使えました。


Web Bluetoothが動く条件


  • HTTPS環境下のみ実行可

  • ユーザーアクション(クリックやキーボード操作など)をトリガーにして実行すること

  • Service Workerを使ったオフライン起動も:ok:


実戦投入してわかったWeb Bluetoothの癖


Advertisingは今の所未サポート(2018/09/06現在)

AndroidやiOSのネイティブアプリなら、Scan時にAdvertisingでデータを見ることもあると思いますが、Web Bluetoothには今の所サポートされていないため要注意。


readValuestartNotificationを複数実行したいときに同時に実行できない

アプリ起動時に、複数のCharacteristicに対してreadValuestartNotificationでデータを吸い上げることになりますが、同じタイミングで複数個を実行するとAndroid Chromeでエラーを吐いた(Macでは問題なかった)。端末のスペックが影響しているのかな? と憶測... どうしても複数個を実行する必要がある場合、Stackに貯めて1一つずつ実行する処理を自前で実装する必要がある。


Android Chromeで設定できるNotificationは15本まで

Web Bluetoothの問題ではなく、Android OSのバージョンに依存する(Android 4.4は7本、8.0は15本)。たくさんデータのやり取りが必要な場合(BLEでそこまで送らないで..というのは思いつつ)、Notificationは必要最低限の数にして、残りはReadで補うという工夫が必要になりそうです(ちゃんと数えていませんがMacでは15本以上も問題なく設定できた)。


Android端末によって転送速度が全然違う

開発は手元のXperiaで進めていたので転送速度も特に気にせずやれていたのですが、検証端末で使った海外製のAndroidだと悲しくなるほど劇遅に... 端末もある程度絞ったほうがよさそう。


ネイティブアプリに比べたらやれること限られるけど、JSでも意外とよかった

「そんなんネイティブでやりゃ〜いいじゃん」と言われそう:sweat_smile:だけども、ストアへの申請の面倒くささや更新の頻度、ユーザーの端末への導入しやすさで考えると意外とありなのかなと思いました。Service Workerのオフライン起動やApplication Manifestを使ってネイティブアプリっぽく見せるのもありかなと(そのあたりも実戦投入したのでどこかのタイミングでまとめます)。

Web Bluetoothでもっと何か作りたいな:muscle: