无需预扫描，通过HTML5连接指定名称BLE设备是否可行？

可以实现点击操作后直接连接指定名称的BLE设备，但需遵循浏览器蓝牙API的安全规则，同时分两种场景处理：

基础限制说明 #

• 仅支持Chrome/Edge浏览器，Firefox、Safari因安全隐私原因暂不支持该功能。
• 只能在HTTPS或localhost环境下运行，HTTP环境无法使用蓝牙API。
• 所有蓝牙扫描、连接操作必须由用户主动触发（如绑定到按钮点击事件），不能自动执行。

场景1：连接已配对的指定名称设备 #

如果目标设备之前已与浏览器配对，可直接从已配对列表中查找并连接，无需重新扫描：

async function connectToPairedDevice() {
  // 获取所有已配对蓝牙设备
  const devices = await navigator.bluetooth.getDevices();
  // 筛选指定名称的设备
  const targetDevice = devices.find(device => device.name === 'MyLovedBLEDevice');
  
  if (targetDevice) {
    try {
      await targetDevice.gatt.connect();
      console.log(`已连接到 ${targetDevice.name}`);
    } catch (error) {
      console.error('连接失败:', error);
    }
  } else {
    console.log('未找到已配对设备，将尝试扫描新设备');
    await scanAndConnectToDevice();
  }
}

场景2：扫描并连接未配对的指定名称设备 #

针对未配对的设备，需通过扫描匹配指定名称，若存在多个同名设备，会优先连接第一个被扫描到的：

async function scanAndConnectToDevice() {
  try {
    const device = await navigator.bluetooth.requestDevice({
      acceptAllDevices: false,
      filters: [{ name: 'MyLovedBLEDevice' }],
      // 需指定设备的服务UUID才能正常交互，替换为你的设备对应UUID
      optionalServices: ['0000ffe0-0000-1000-8000-00805f9b34fb']
    });
    
    await device.gatt.connect();
    console.log(`已连接到 ${device.name}`);
  } catch (error) {
    console.error('扫描或连接失败:', error);
  }
}

绑定用户触发事件 #

将连接函数绑定到按钮点击，确保操作由用户主动触发：

<button onclick="connectToPairedDevice()">连接指定BLE设备</button>

注意事项 #

• 对于未配对设备，部分浏览器可能仍会弹出设备选择框，这是浏览器的安全限制，无法绕过。
• 若需与设备进行数据交互，必须在optionalServices中指定设备提供的服务UUID，否则无法访问对应特征值。

内容的提问来源于stack exchange，提问作者ZioBit