Web Bluetooth API Integration: Connect the Web with Nearby Devices

Originally published on Makemychance.com

The Web Bluetooth API bridges the gap between web applications and nearby Bluetooth Low Energy (BLE) devices, allowing your website to connect, read, and write data to real-world hardware without requiring a native app.

If you’ve ever wanted to control smart devices, fitness bands, or custom IoT hardware directly from a website, the Web Bluetooth API makes it possible — all in JavaScript.

In this guide, we’ll walk through the key concepts, permissions, and code examples to help you get started.

🚀 What is the Web Bluetooth API?

The Web Bluetooth API lets a browser communicate with nearby BLE devices using GATT (Generic Attribute Profile). It works securely, requiring HTTPS and user interaction (like clicking a button) to initiate device discovery.

Supported browsers:

✅ Chrome (desktop & Android)
❌ Not supported in Safari (including iOS) or Firefox

🔐 Why Use Web Bluetooth?

No need to build a native app
Works directly from the browser
Great for IoT, healthcare, wearables, robotics

Allows reading/writing to characteristics (sensors, commands, etc.)

🧪 Basic Flow of Web Bluetooth

Request a device
Connect to GATT Server

Get Service
Get Characteristic
Read/Write or Subscribe

🧑‍💻 Code Example: Connect to a Bluetooth Device

<button id="connectBtn">Connect to Bluetooth Device</button>

<script>
  document.getElementById('connectBtn').addEventListener('click', async () => {
    try {
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['battery_service'] }]
      });

      const server = await device.gatt.connect();
      const service = await server.getPrimaryService('battery_service');
      const characteristic = await service.getCharacteristic('battery_level');

      const value = await characteristic.readValue();
      const batteryLevel = value.getUint8(0);

      console.log(`Battery level is ${batteryLevel}%`);
      alert(`Battery level: ${batteryLevel}%`);
    } catch (error) {
      console.error('Bluetooth connection failed:', error);
    }
  });
</script>

<button id="connectBtn">Connect to Bluetooth Device</button>

<script>
  document.getElementById('connectBtn').addEventListener('click', async () => {
    try {
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['battery_service'] }]
      });

      const server = await device.gatt.connect();
      const service = await server.getPrimaryService('battery_service');
      const characteristic = await service.getCharacteristic('battery_level');

      const value = await characteristic.readValue();
      const batteryLevel = value.getUint8(0);

      console.log(`Battery level is ${batteryLevel}%`);
      alert(`Battery level: ${batteryLevel}%`);
    } catch (error) {
      console.error('Bluetooth connection failed:', error);
    }
  });
</script>

🔄 Subscribing to Notifications (e.g. Heart Rate Monitor)

const characteristic = await service.getCharacteristic('heart_rate_measurement');

characteristic.addEventListener('characteristicvaluechanged', event => {
  const value = event.target.value;
  const heartRate = value.getUint8(1);
  console.log('Heart Rate:', heartRate);
});

await characteristic.startNotifications();

const characteristic = await service.getCharacteristic('heart_rate_measurement');

characteristic.addEventListener('characteristicvaluechanged', event => {
  const value = event.target.value;
  const heartRate = value.getUint8(1);
  console.log('Heart Rate:', heartRate);
});

await characteristic.startNotifications();

⚠️ Things to Keep in Mind

Works only on HTTPS domains (except localhost)

Requires user gesture (like a click) to trigger device scan
Device must support BLE (Bluetooth Low Energy)
API is still experimental — test thoroughly

🌐 Real-World Use Cases

Fitness trackers (e.g., step count, heart rate)
Smart home devices (e.g., light control)
Industrial IoT (e.g., sensors, scanners)

Educational robotics and toys

✅ Conclusion

The Web Bluetooth API unlocks the ability to create powerful, interactive web applications that can talk to nearby hardware — all without leaving the browser. Whether you’re building a health tracker dashboard, a smart home controller, or experimenting with Arduino/BLE devices, this API opens up exciting possibilities.

As always, test compatibility across devices, and ensure secure, permission-aware implementations.

API Integration Best Practices – A Developer’s Guide

Web MIDI Api Usage-Complete Guide

🛠️ Solving “Deprecation Warning [legacy-js-api]” in Dart Sass While Building a React Project

Arsalan

Arsalan Malik is a passionate Software Engineer and the Founder of Makemychance.com. A proud CDAC-qualified developer, Arsalan specializes in full-stack web development, with expertise in technologies like Node.js, PHP, WordPress, React, and modern CSS frameworks.

He actively shares his knowledge and insights with the developer community on platforms like Dev.to and engages with professionals worldwide through LinkedIn.

Arsalan believes in building real-world projects that not only solve problems but also educate and empower users. His mission is to make technology simple, accessible, and impactful for everyone.