Web Bluetooth API not showing custom services

Question

I have a Bluetooth Low Energy device that has two services:

1. Battery service
2. Custom service to send GPS coordinates

My JavaScript can be seen here - https://reverent-turing-cbe90d.netlify.app/ - you will need your own Google Maps API key but the Bluetooth functionality doesn't require the map.

The uuid of the custom service is 00000001-5D8B-474C-AC79-AB44EDE9EF2F.

The code I am using for the peripheral device can be found here - https://drive.google.com/file/d/1uljTZe2mbeOAsqiXuf1iLnQBFB91PO70/view?usp=sharing

Both services work on desktop Chrome 86.0.4240.198 however using Chrome 86.0.4240.198 on my OnePlus 8 Pro I can only see the Battery service.

How can I get this working on both desktop and mobile?

Answer 1

On mobile, do you see the device in the bluetooth browser picker? If not, can you use optionalServices and see it?

navigator.bluetooth.requestDevice({
  filters: [
    {
      services: ["battery_service"],
      optionalServices: ["00000001-5d8b-474c-ac79-ab44ede9ef2f"],
    },
  ],
});

If you see them, I'd assume getPrimaryServices() doesn't return your "Custom service to send GPS coordinates". If so, can you try calling it specifically with code below and sharing the error?

const customService = await server.getPrimaryService("00000001-5d8b-474c-ac79-ab44ede9ef2f");