Experimenting with web Bluetooth advertisement packets
Did you know that you can receive data from a Bluetooth device without connecting to it? Bluetooth advertisement packets can be used for this purpose, and the good news is that this going to be possible in the web browser as well.
Let’s see how!
Short introduction to Bluetooth Low Energy ( BLE )
BLE is mainly used to connect and control various types of “smart,” usually battery powered, devices. These can range from smartwatches to light bulbs, to weather sensors, and even toothbrushes. Your imagination is the only limit to BLE’s applications.
Let’s see how this communication works! In a nutshell, there are two main phases in this process:
- Advertisement phase
The smart device broadcasts (advertises) some data, which usually contains its identification and some other info needed for connecting later on. However, it can broadcast some extra information which can be readily used. - Connected state
The connected device ( usually your phone or laptop ) will exchange data with the smart device.
Practical use of advertisement data
Advertisement data can be very useful even in cases when you are not looking to connect to the BLE device at all. By receiving and interpreting these advertisement packets, you are able to
- Approximate your indoor position (one application of BLE beacons)
- Detect your location, which is another use of beacons, e.g. your phone can detect the proximity of a certain object, and can display related data. Real world examples are museum or exhibition locations, where you can get tailored information about the item visited… or you can simply find your lost keys using a BLE key-fob
- Receive broadcasted sensor data, like ambient temperature, humidity, …or the next scheduled bus arriving time at a “smart-bus-stop”
What’s the difference between obtaining data from an advertising packet, and simply connecting to the BLE device and reading the information directly?
There are two main differences
- Most BLE devices only allow for one connection, so when it is connected no one else is able to get data from it. The advertising phase is also stopped meanwhile.
- When you are receiving advertisement data, you can get data from an unlimited number of devices, while the number of active connections is strongly limited
Browser implementation
For several years, web browsers have slowly implemented Bluetooth functionalities to their services. Google Chrome was one of the first to include it, and the implementation road map has been slow but steady. New features are being introduced from time to time, and “Bluetooth Advertisements” are one of the most recent features being developed.
Part of these new functions are still behind a feature flag, but sooner or later, we will see them arrive in production.
Before embarking on your own web browser Bluetooth experiments, you’ll need to enable this flag:
chrome://flags/#enable-experimental-web-platform-features
It’s also recommended that your first check the current implementation status from your platform point of view.
Scan — receive advertisements from multiple devices
If we’re looking to receive identification data from multiple devices we should use the “requestLEScan” method like in the example below.
In this example, I’ll set up two different mobile phones to act as a BLE beacons, using the “nRF Connect for Mobile” from Nordic Semiconductor. The beacons will advertise the following payload:
Name: 1–800-p10 / Service data: 0x2345 / Manufacturer data: 0xF002 / 0xF003 ( as beacon ID )
Don’t forget the advertisement payload is really limited in size, you can broadcast several bytes as service- and/or manufacturer data.
After running the sample code, the browser will prompt the user to allow the Bluetooth scan operation. Then it will log all advertisement events with its name from any BLE beacons, starting with “1–800”.
It seems to be a general rule for browser-based Bluetooth communication that you should know something about the discoverable devices or services, and this information should be passed to the corresponding API method.
In this example we have provided the name prefix of the devices we are interested in.
The result is logged on the developer console: we have received the advertisement packet from both devices. The beacons also have unique IDs, but in this experiment I have set different payloads in the “manufacturer data” property so we can easily recognize the different items.
Watching advertisements from a selected device
In this case we are going to select an active, nearby BLE device, then we can continuously receive its advertisement packets without connecting to it. The benefit is: to leave the chance for others to receive data as well, but — in contrast to the previous example — we are receiving data only from the selected device.
In the following example I use a simple BLE beacon which broadcasts — beside its identification — the ambient temperature and humidity.
The following script is needed for the browser to receive this advertisement payload:
Please observe the filter we have provided to the Web-Bluetooth subsystem, the device name ( or its fragment ) and the services IDs all are required to receive valuable data.
If you forget to set the service IDs, the browser will not include the corresponding data records to the ‘advertisementreceived’ event!
And the result is the following:
To help in the interpretation of the received data:
The service ID 0x2a6f means the (relative)Humidity ( is 34% ), 0x2a6e stands for the Temperature. The latter should be divided by 10, so in the example the value 215 will be 21.5°C.
If you are interested in #Bluetooth communication and #web technology, it’s time start experimenting!
