iOS 1.16.2下Native PWA中getUserMedia重复请求权限问题

问题背景 #

开发的PWA需调用相机扫描二维码，使用getUserMedia()请求权限时，设备闲置一段时间后再次扫码会重复弹出权限提示：

• Safari浏览器中全局授权后，PWA模式下不会重复提示；
• 但从应用商店安装的Native PWA仍会多次弹窗，即便已在系统设置中开启该应用的相机全局权限；
• 对比使用<input type="file" accept="image/*" capture="environment">无重复提示问题，仅getUserMedia()存在该异常。

核心原因 #

getUserMedia()的权限持久化逻辑在浏览器PWA和Native PWA环境中存在差异，Native PWA的权限缓存机制未正确识别系统全局权限设置，导致每次调用时重新触发权限请求。

解决方法 #

1. 替换为input捕获方案（推荐） #

既然<input type="file" accept="image/*" capture="environment">能满足需求且无重复提示，直接采用该方案：

<input type="file" accept="image/*" capture="environment" id="cameraInput">

配合JS处理图片解析：

document.getElementById('cameraInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  // 加入二维码解析逻辑，比如用QRCode.js等库处理文件
});

该方案依赖系统原生相机流程，权限遵循全局设置，不会重复弹窗。

2. 优化getUserMedia()权限逻辑 #

若必须使用getUserMedia()，可通过以下方式减少重复提示：

• 预请求权限并缓存状态：应用初始化时主动请求权限，将状态存在localStorage，后续调用前先检查缓存：

// 初始化时预请求权限
async function initCameraPermission() {
  if (!localStorage.getItem('cameraPermissionGranted')) {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      stream.getTracks().forEach(track => track.stop());
      localStorage.setItem('cameraPermissionGranted', 'true');
    } catch (err) {
      localStorage.setItem('cameraPermissionGranted', 'false');
    }
  }
}

// 扫码前校验权限
async function scanQRCode() {
  const hasPermission = localStorage.getItem('cameraPermissionGranted') === 'true';
  if (!hasPermission) {
    alert('请在系统设置中开启相机权限以使用扫码功能');
    return;
  }
  // 正常调用getUserMedia()
  const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
  // 扫码逻辑...
}

• 枚举设备判断权限状态：通过enumerateDevices()检查相机设备是否有标签（有标签说明已授权），避免重复请求：

async function checkCameraPermission() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const cameraDevice = devices.find(device => device.kind === 'videoinput');
  return cameraDevice && cameraDevice.label !== '';
}

3. Native PWA专属配置 #

对于应用商店安装的Native PWA，需确保manifest.json配置正确：

{
  "name": "你的PWA应用名称",
  "display": "standalone",
  "permissions": ["camera"],
  "icons": [...]
}

同时可引导用户直接通过系统设置确认权限，减少前端弹窗的重复触发。

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