Web API見本市
デバイス連携権限プロンプトあり判定中...

Web Bluetooth API

BLE（Bluetooth Low Energy）デバイスへブラウザから接続し、GATTサービスの読み書きができるAPI。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome56+
Firefox未対応
Safari未対応

備考: Chromium限定

2権限フロー

  1. 権限不要

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトありこのAPI

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

ボタンクリック等のユーザージェスチャー内でのみ requestDevice() を呼べる。呼ぶとデバイス選択ダイアログ（チューザー）が表示される。

3ライブデモ: BLEデバイスのバッテリー残量読み取り

4コードスニペット

TypeScript（要約版）
// デバイス選択ダイアログを起動（ユーザージェスチャー必須）
const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ["battery_service"] }], // 0x180F
});

// GATT接続
const server = await device.gatt!.connect();

// Battery Serviceから残量を読む
const service = await server.getPrimaryService("battery_service");
const ch = await service.getCharacteristic("battery_level");
const value = await ch.readValue();
console.log("battery:", value.getUint8(0), "%");

// 残量変化の通知を購読する
await ch.startNotifications();
ch.addEventListener("characteristicvaluechanged", (e) => {
  const v = (e.target as BluetoothRemoteGATTCharacteristic).value!;
  console.log("changed:", v.getUint8(0), "%");
});

// 後始末: 切断
device.gatt?.disconnect();