A React web app that uses Web Bluetooth to scan for a Bluetooth device advertising the Environmental Sensing GATT service, connects to it, reads a value from the device's Battery Service's Battery Level GATT characteristic, logs it, and disconnects from the device. Obviously, this is a very specific use case, but one can easily change these by modifying src/App.js to scan for a different GATT service instead.
To take a quick peek at the web app, visit https://cheeyi.github.io/web-bluetooth-poc/, which was deployed from the main branch and lives on the gh-pages branch.
This project was bootstrapped with Create React App.
In the root directory of the project:
- Run
npm installto install dependencies. - Run
npm startto build and run the app in the development mode. - Open http://localhost:3000 to view it in your browser (Chromium-based browsers preferred).
The page will reload when you make changes.
- Open
package.jsonand updatehomepageto point to your GitHub profile and repo name. - Run
npm run deploy.
It's important to realize that the Web Bluetooth specification has not been finalized yet. However, here are some limitations I've come across:
- Web Bluetooth's API availability is determined by your browser vendor. For example, Safari doesn't support Web Bluetooth because Apple declined to implement it.
- It's possible to scan for all BLE devices in the vicinity if one specifies
acceptAllDevices: truein therequestDevicecall, but only GATT services specified in theoptionalServices: []key can be interacted with. This means that we'll not be able to do anything with a device if we don't know (or didn't guess correctly) what GATT services a device has beforehand. - Web Bluetooth requires the user to explicitly select a device using a pop-up browser prompt. Depending on your app's use case, this may or may not be a dealbreaker.
- Some APIs have yet to be fully implemented, such as
getDevices()as of the time of writing. Check out the Implementation Status page for updated information.