Web Serial API无需用户手势自动打开端口的实现方案咨询

核心限制说明 #

Web Serial API 要求port.open()调用必须在用户激活上下文（由点击、按键等用户主动交互触发的执行上下文）中执行，navigator.serial.onconnect属于系统触发事件，默认没有用户激活权限，因此调用open()会被浏览器拦截，这是标准安全策略限制。
以下是量产场景下可行的实现方案： #

可行方案 #

方案1：预授权复用（适用大多数量产场景，无需修改浏览器配置） #

• 首次进入页面时引导用户完成一次主动授权点击，在点击回调中完成目标设备的权限申请，用户授权过的设备会被存入浏览器的授权设备列表
• 后续监听connect事件时，先校验接入的端口是否存在于navigator.serial.getPorts()返回的已授权列表中，已授权的设备不需要额外用户手势即可直接调用open()
• 代码示例：

// 页面初始化时的授权按钮点击事件
document.querySelector('#grant-btn').addEventListener('click', async () => {
  // 申请指定VID/PID设备的权限，用户确认后该设备进入授权列表
  await navigator.serial.requestPort({
    filters: [{ usbVendorId: 0x1234, usbProductId: 0x5678 }] // 替换为你的设备参数
  });

  // 监听串口接入事件
  navigator.serial.addEventListener('connect', async (e) => {
    const connectedPort = e.port;
    const authorizedPorts = await navigator.serial.getPorts();
    // 确认接入端口是已授权设备
    const isAuthorized = authorizedPorts.some(port => port === connectedPort);
    if (isAuthorized) {
      // 直接打开端口，无需用户手势
      await connectedPort.open({ baudRate: 115200 });
      // 后续逻辑处理
    }
  });
});

方案2：浏览器企业策略配置（适用封闭可控的量产终端环境） #

如果量产场景使用的是固定可控的终端设备，可以通过配置浏览器企业策略完全取消用户手势和授权要求：

• 针对Chrome/Edge浏览器，配置组策略/注册表的SerialAllowUrls项，添加你的业务站点域名到白名单
• 同时配置SerialAllowPorts项，允许指定VID/PID的串口设备自动授权
• 配置完成后，站点在onconnect回调中可以直接调用open()，无需任何用户交互

方案3：PWA安装增强（可选优化方案） #

将业务站点打包安装为桌面PWA应用，PWA的独立运行上下文可以保留更长时间的用户激活状态，配合预授权机制可以进一步提升自动打开的稳定性，避免浏览器页面后台挂起导致的授权失效问题。

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