Интеграция Web Bluetooth API: как подключить BLE-устройства к сайту

Типичная ситуация: у вас есть BLE-устройство — пульсометр, умная лампа или промышленный датчик. Производитель даёт только мобильное приложение. Вы хотите, чтобы пользователи управляли устройством прямо с сайта, без установки софта. Web Bluetooth API решает эту задачу, но требует аккуратной работы с протоколом, переподключениями и обработкой ошибок. За 5 лет мы провели более 20 интеграций с BLE-устройствами: от фитнес-браслетов до медицинских мониторов. Экономия на разработке мобильного приложения может достигать 70%, а время выхода на рынок сокращается в 3 раза. Хотите подключить BLE-устройство к сайту? Оценим проект за один день — напишите нам.

Какие BLE-устройства можно подключить к сайту?

Подключаемся к пульсометрам, термометрам, лампам, контроллерам — любым устройствам с Bluetooth Low Energy. Пользователь открывает страницу, нажимает «Подключить», выбирает устройство из списка — и сайт начинает принимать показания датчика, менять яркость или включать мотор. Главное — разобраться с сервисами и характеристиками GATT. Если документация есть, интеграция занимает дни. Если нет — мы реверсим протокол через сниффер.

Почему Web Bluetooth API — альтернатива мобильному приложению?

Внедрение через браузер втрое быстрее нативной разработки и не требует публикации в магазинах. Пользователь не скачивает приложение — просто переходит по ссылке. Обновления применяются мгновенно на сервере, без версионирования. Для компании это снижает порог входа и экономит до 70% на поддержке двух платформ.

Как обеспечить стабильное подключение после разрыва?

Критично для устройств, требующих непрерывного потока данных. Мы реализуем автоматическое переподключение с экспоненциальной задержкой: первая попытка через 1 секунду, вторая через 2, третья через 4. После трёх неудач выводим уведомление. Ниже пример кода на TypeScript.

Подключение к устройству

interface BluetoothDevice { name: string gatt: BluetoothRemoteGATTServer } async function connectToDevice(serviceUUID: string): Promise<BluetoothRemoteGATTServer> { const device = await navigator.bluetooth.requestDevice({ filters: [{ services: [serviceUUID] }], }) console.log(`Подключаемся к: ${device.name}`) device.addEventListener('gattserverdisconnected', () => { console.log('Устройство отключилось') }) const server = await device.gatt!.connect() return server } 

Чтение данных: пульсометр

class HeartRateMonitor { private server: BluetoothRemoteGATTServer | null = null private characteristic: BluetoothRemoteGATTCharacteristic | null = null async connect() { this.server = await connectToDevice('heart_rate') const service = await this.server.getPrimaryService('heart_rate') this.characteristic = await service.getCharacteristic('heart_rate_measurement') await this.characteristic.startNotifications() this.characteristic.addEventListener( 'characteristicvaluechanged', this.handleHeartRateMeasurement.bind(this) ) } private handleHeartRateMeasurement(event: Event) { const value = (event.target as BluetoothRemoteGATTCharacteristic).value! const flags = value.getUint8(0) let heartRate: number if (flags & 0x01) { heartRate = value.getUint16(1, true) } else { heartRate = value.getUint8(1) } const rrIntervals: number[] = [] if (flags & 0x10) { for (let i = 2; i + 1 < value.byteLength; i += 2) { rrIntervals.push(value.getUint16(i, true) / 1024 * 1000) } } console.log(`ЧСС: ${heartRate} уд/мин, RR: [${rrIntervals.join(', ')}] мс`) } async disconnect() { await this.characteristic?.stopNotifications() this.server?.disconnect() } } 

Запись данных: управление умной лампой

class SmartLightController { private server: BluetoothRemoteGATTServer | null = null private controlChar: BluetoothRemoteGATTCharacteristic | null = null private readonly SERVICE_UUID = '00010203-0405-0607-0809-0a0b0c0d1910' private readonly CONTROL_UUID = '00010203-0405-0607-0809-0a0b0c0d2b11' async connect() { this.server = await connectToDevice(this.SERVICE_UUID) const service = await this.server.getPrimaryService(this.SERVICE_UUID) this.controlChar = await service.getCharacteristic(this.CONTROL_UUID) } async setColor(r: number, g: number, b: number) { const command = new Uint8Array([ 0x33, 0x05, 0x02, r, g, b, 0x00, 0x00, 0x00, r ^ g ^ b, ]) await this.controlChar!.writeValueWithResponse(command) } async setBrightness(level: number) { const command = new Uint8Array([ 0x33, 0x04, Math.round(level * 2.55), 0x00, ]) await this.controlChar!.writeValueWithoutResponse(command) } async readBatteryLevel(): Promise<number> { const service = await this.server!.getPrimaryService('battery_service') const char = await service.getCharacteristic('battery_level') const value = await char.readValue() return value.getUint8(0) } } 

React-хук для управления подключением

function useBluetooth() { const [device, setDevice] = useState<BluetoothRemoteGATTServer | null>(null) const [isConnected, setIsConnected] = useState(false) const [isSupported] = useState(() => 'bluetooth' in navigator) const [error, setError] = useState<string | null>(null) const connect = useCallback(async (serviceUUID: string) => { try { setError(null) const server = await connectToDevice(serviceUUID) setDevice(server) setIsConnected(true) } catch (err) { if ((err as Error).name === 'NotFoundError') { setError('Устройство не выбрано') } else { setError((err as Error).message) } } }, []) const disconnect = useCallback(() => { device?.disconnect() setDevice(null) setIsConnected(false) }, [device]) return { device, isConnected, isSupported, error, connect, disconnect } } 

Переподключение после разрыва

device.addEventListener('gattserverdisconnected', async () => { let retries = 0 while (retries < 3) { await new Promise((r) => setTimeout(r, 1000 * (retries + 1))) try { await device.gatt!.connect() await resubscribeCharacteristics() console.log('Переподключено') return } catch { retries++ } } console.error('Не удалось переподключиться') }) 

Сравнение: Web Bluetooth API vs нативное приложение

Типичные ошибки при интеграции BLE

Устройство не отображается при сканировании. Убедитесь, что сайт открыт по HTTPS, запросите разрешение на использование Bluetooth. Причина часто в отсутствии optionalServices. Разрыв соединения при переходе фона. Используйте navigator.wakeLock или переподключайтесь автоматически. Некорректный парсинг данных. Проверяйте битовые флаги, порядок байтов (little-endian).

Какие браузеры поддерживают Web Bluetooth?

На сегодня Web Bluetooth API работает в Chrome 70+, Edge 79+ и Chrome Android. Firefox и Safari не поддерживают. Если ваша аудитория использует эти браузеры, можно предложить обходные пути: Native Messaging, PWA с Service Worker или гибридное приложение. Для большинства B2B-сценариев Chrome — стандартный выбор.

План работ: этапы интеграции

Что входит в работу

• Полная документация по протоколу и коду интеграции.
• Доступ к репозиторию с исходным кодом и инструкцией по развёртыванию.
• Обучение вашей команды: как поддерживать и расширять интеграцию.
• Поддержка в течение 30 дней после запуска (исправление багов, консультации).

Как подключить BLE-устройство: пошаговая инструкция

1. Проверьте поддержку браузера: if ('bluetooth' in navigator).
2. Запросите устройство: navigator.bluetooth.requestDevice({ filters: [...] }).
3. Подключитесь к GATT-серверу: device.gatt.connect().
4. Получите нужный сервис и характеристику.
5. Начните читать или записывать данные.
6. Обработайте отключение: подпишитесь на событие gattserverdisconnected.

Сроки и стоимость

Срок интеграции с задокументированным устройством — от 3 до 5 дней. Для устройств без документации (реверс протокола) — от 7 до 12 дней. Стоимость рассчитывается индивидуально, исходя из сложности протокола и необходимости разработки UI. Оценим ваш проект в течение рабочего дня — просто напишите нам. Получите консультацию по интеграции BLE уже сегодня.

Подробнее о технологии: Web Bluetooth API и Bluetooth Low Energy.