PWA集成硬件外设访问需满足HTTPS、Service Worker和manifest.json三要素，并在用户手势触发下分别调用Web USB/Bluetooth/HID/MIDI API请求权限，严格遵循浏览器安全与隐私控制机制。
PWA 集成硬件外设访问权限，本质是把现代浏览器的硬件 API（如 Web HID、Web USB、Web Bluetooth、Web MIDI）与 PWA 的离线能力、可安装性结合起来。它不是“一键开启”，而是分两层：PWA 基础架构 + 硬件权限按需请求。关键在于权限必须由用户主动触发、运行在安全上下文，并且不能绕过浏览器的隐私控制机制。
PWA 必须先满足基础条件
- 页面必须通过 HTTPS（或 localhost 开发环境）
- 已注册 Service Worker（用于缓存、离线支持）
- 已配置
manifest.json（含图标、名称、display: "standalone"等）并正确<link rel="manifest">引入
没有这些，浏览器根本不会识别为 PWA，更不会允许后续的硬件权限提示出现。
硬件权限需独立、显式请求
PWA 本身不“自带”硬件访问能力，所有外设交互都依赖对应 API，且每种权限必须单独请求、用户点击确认。常见类型及调用方式：
USB 设备（如自定义传感器、开发板）
使用navigator.usb.requestDevice()，需提供vendorId/productId过滤器
✅ 必须在用户点击等手势事件中调用
✅ 设备需支持标准 USB 协议，Chrome/Edge 支持较好蓝牙设备（如心率带、BLE 模块）
调用navigator.bluetooth.requestDevice()，可按filters（如services: ['heart_rate']）筛选
✅ 返回BluetoothDevice后需连接 GATT 服务器，读写特征值
✅ iOS Safari 不支持，Android Chrome 支持稳定HID 设备（如游戏手柄、定制键盘、条码枪）
使用navigator.hid.requestDevice()，支持usagePage/usage或vendorId/productId匹配
✅ 数据通过inputreport事件接收，需手动解析二进制报告
✅ 可监听热插拔（hid.onconnect/ondisconnect）MIDI 设备（如电子琴、控制器）
调用navigator.requestMIDIAccess()，返回MIDIAccess对象
✅ 自动发现输入/输出端口，支持statechange监听插拔
✅ Safari 支持有限，推荐 Chrome/Firefox
权限管理要尊重用户行为和隐私
- 所有硬件 API 都遵循浏览器统一权限模型：首次请求弹窗，用户可“允许”“拒绝”或“仅本次”
- 使用
navigator.permissions.query()可提前检查状态（如{name: 'usb'}），避免重复打扰 - 若用户拒绝，后续需引导其手动在浏览器设置中开启（如
chrome://settings/content/usb） - 不要自动轮询或静默请求——这会被拦截，也违反 Chrome 等浏览器的 UX 规范
实际集成建议
- 把硬件功能设计为“增强模式”：PWA 主体功能（如界面、本地缓存数据）不依赖外设；连接成功后再启用控制逻辑
- 在 UI 上提供清晰按钮（如“连接扫码枪”），点击后才触发
requestDevice() - 处理好降级体验：设备不可用时显示友好提示，而非报错中断流程
- 注意兼容性标注：在产品说明中注明“需 Chrome 90+、Android 10+，iOS 不支持 USB/HID”等限制
不复杂但容易忽略。
