I'm trying to establish a bluetooth communication between a web page and ESP32. I made a simple web page using an example I found online and it's working in Chrome from my windows-based laptop. It connects to ESP32, and can read and write BLE service and properties. However, same web page is not working in Chrome on an Android phone. It cannot connect to the BLE services. I used nRF connect app, scanned the available BLE services and noticed that all GUIDs look different on the phone, and not matching to the ones I used on ESP32. After changing the GUIDs to these ones, it connected successfully. Can anyone explain why BLE service IDs look different from a windows device (laptop) and from the phone? I would like to have a single web app that can be used on both devices.

Example:

var bleService = 'd65d0396-0000-4381-9985-653653ce831f'; //works on Windows
var bleService = '6ba1b218-15a8-461f-9fa8-5dcae273eafd'; //works on Android (same service!)

Excerpt of the code used on the webpage:

    function connectToDevice(){
        log('Initializing Bluetooth...');
        statusContainer.innerHTML = 'Initializing Bluetooth...';
        navigator.bluetooth.requestDevice({
            filters: [{name: deviceName}]
            ,optionalServices: [bleService]
        })
        .then(device => {
            log('Device Selected:', device.name);
            bleStateContainer.innerHTML = 'Connected to device ' + device.name;
            bleStateContainer.style.color = "#24af37";
            device.addEventListener('gattservicedisconnected', onDisconnected);
            return device.gatt.connect();
        })
        .then(gattServer =>{
            bleServer = gattServer;
            log("Connected to GATT Server");
            statusContainer.innerHTML = 'Connected to GATT Server';
            return bleServer.getPrimaryService(bleService);
        })

I'm trying to establish a bluetooth communication between a web page and ESP32. I made a simple web page using an example I found online and it's working in Chrome from my windows-based laptop. It connects to ESP32, and can read and write BLE service and properties. However, same web page is not working in Chrome on an Android phone. It cannot connect to the BLE services. I used nRF connect app, scanned the available BLE services and noticed that all GUIDs look different on the phone, and not matching to the ones I used on ESP32. After changing the GUIDs to these ones, it connected successfully. Can anyone explain why BLE service IDs look different from a windows device (laptop) and from the phone? I would like to have a single web app that can be used on both devices.

Example:

var bleService = 'd65d0396-0000-4381-9985-653653ce831f'; //works on Windows
var bleService = '6ba1b218-15a8-461f-9fa8-5dcae273eafd'; //works on Android (same service!)

Excerpt of the code used on the webpage:

    function connectToDevice(){
        log('Initializing Bluetooth...');
        statusContainer.innerHTML = 'Initializing Bluetooth...';
        navigator.bluetooth.requestDevice({
            filters: [{name: deviceName}]
            ,optionalServices: [bleService]
        })
        .then(device => {
            log('Device Selected:', device.name);
            bleStateContainer.innerHTML = 'Connected to device ' + device.name;
            bleStateContainer.style.color = "#24af37";
            device.addEventListener('gattservicedisconnected', onDisconnected);
            return device.gatt.connect();
        })
        .then(gattServer =>{
            bleServer = gattServer;
            log("Connected to GATT Server");
            statusContainer.innerHTML = 'Connected to GATT Server';
            return bleServer.getPrimaryService(bleService);
        })

• android
• bluetooth-lowenergy
• esp32

1 Answer 1

OMG, found the reason! I had a different firmware loaded on the ESP32 before and turns out once you connect a device and it's BONDED in the nRF app, the properties information is cached! I'm new to BLE and not sure how it works, but seems it's cached on the OS level, so it didn't work in Chrome as well. Once I removed BOND and re-scanned and re-connected, it started working perfectly. The GUIDs are now showing up on the phone in the same exact way as on the laptop.