Інтеграція 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.