Connect to devices via Bluetooth in a PWA

Demo

Install the app, open it from your homescreen, then tap the button below to scan nearby devices available via Bluetooth.

How it works

This simplistic demo allows you to connect to any nearby devices. In a real PWA, you'll likely want to limit the search to specific types of devices (e.g. heart rate monitors) by using filters.

Once connected to a device via Bluetooth, you have to connect to its GATT server and retrieve its primary service by specifying the UUID of the GATT service you wish to connect to.

You will then need to know the ID of its GATT characteristic, which can be heart rate, battery level, cycling cadence, light intensity, or just about anything else depending on the purpose of the device.

Compatibility

The Web Bluetooth API is available on Windows, macOS, and Android (via Chrome, Edge, or Brave). However, this API is not available in any way, shape or form on iOS. If your app requires Bluetooth on iOS, you will have to create a native app rather than a PWA.

Code

Links & Documentation

• Web Bluetooth API on MDN
• List of GATT service UUIDs
• GATT Specification Supplement