Chrome Android中已安装的PWA未请求摄像头权限问题

问题场景 #

• 基于react-webcam开发的React PWA，在Chrome浏览器标签页中运行时，摄像头权限提示正常弹出，功能完全正常
• 安装为独立PWA应用后启动，没有任何权限提示弹出，摄像头无法加载
• 提前在Chrome浏览器中给站点授予摄像头权限后，再打开PWA就能正常使用摄像头

可能的原因及解决办法 #

1. PWA环境下权限请求需用户主动触发 #

Chrome的独立PWA窗口对权限请求的触发限制比标签页更严格——非用户主动交互触发的权限请求会被静默阻止，不会弹出提示。很多人习惯在组件挂载时自动初始化摄像头，这种逻辑在标签页可能正常，但PWA里就会失效。

解决方式：
把摄像头初始化逻辑绑定到用户的主动操作上（比如点击按钮），示例代码：

import React, { useState, useRef } from 'react';
import Webcam from 'react-webcam';

const Camera = () => {
  const [isCameraActive, setIsCameraActive] = useState(false);
  const webcamRef = useRef(null);

  const activateCamera = () => {
    setIsCameraActive(true);
  };

  return (
    <div>
      {!isCameraActive && <button onClick={activateCamera}>点击开启摄像头</button>}
      {isCameraActive && <Webcam ref={webcamRef} />}
    </div>
  );
};

export default Camera;

2. Service Worker缓存导致旧逻辑残留 #

虽然你没找到直接依据，但如果Service Worker缓存了未添加用户交互触发逻辑的旧页面，PWA加载的就是旧代码，自然不会触发权限提示。

排查方式：

• 打开Chrome DevTools的Application > Service Workers，勾选Update on reload，然后刷新PWA，测试是否恢复正常
• 检查你的Service Worker缓存策略，确保包含摄像头逻辑的页面不会被永久缓存，或者在发布新版本时更新缓存哈希

3. 权限状态同步异常 #

PWA和浏览器标签页共享权限数据库，但首次在PWA中请求时，可能因为上下文初始化的问题，浏览器没有正确触发提示弹窗。可以主动查询权限状态，引导用户处理：

const checkCameraPerm = async () => {
  const permStatus = await navigator.permissions.query({ name: 'camera' });
  if (permStatus.state === 'denied') {
    alert('摄像头权限已被拒绝，请打开Chrome设置，找到对应站点开启权限');
  } else if (permStatus.state === 'prompt') {
    // 这里引导用户点击按钮触发权限请求
  }
};

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