无可用HID设备时WebHID设备选择弹窗仍弹出的问题求助

WebHID API的requestDevice()方法有个默认行为：哪怕系统里没有匹配的HID设备，调用它时还是会弹出设备选择框，这确实会给用户造成困扰。

原因在于隐私安全限制：网页无法直接获取未授权的设备信息，所以没办法提前判断系统中是否存在目标设备，只能通过调用requestDevice()让浏览器去检测并弹窗。

优化方案 #

我们可以通过调整逻辑，尽量减少不必要的弹窗：

• 优先使用已授权的设备，避免重复弹窗
• 处理requestDevice()的异常情况，无设备时静默收尾
• 可选：在调用弹窗前提示用户先连接设备

修改后的代码 #

let device = null;
async function connectToHID() {
  if (!("hid" in navigator)) return;

  // 先查找已授权的目标设备
  const alreadyAssignedDevices = await navigator.hid.getDevices();
  const targetDevice = alreadyAssignedDevices.find(dev => 
    dev.vendorId === 1151 && dev.productId === 64161
  );

  if (targetDevice) {
    device = targetDevice;
    await device.open();
    return;
  }

  // 没有已授权设备时，再尝试请求设备
  try {
    [device] = await navigator.hid.requestDevice({
      filters: [{ vendorId: 1151, productId: 64161 }]
    });
    if (device) await device.open();
  } catch (err) {
    // 用户取消弹窗或无匹配设备时，静默处理
    console.log("未选择设备或无匹配设备");
  }
}

补充说明 #

如果想要完全避免无设备时的弹窗，目前WebHID API没有直接支持的方法——因为浏览器不允许网页读取未授权的设备信息。你可以在调用requestDevice()之前，给用户加个提示，比如“请先连接目标HID设备，再点击连接按钮”，引导用户提前准备好设备，减少无效弹窗的出现。

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