iOS环境下React PWA麦克风权限无法持久化问题求助

问题原因 #

• iOS Safari/PWA环境下，navigator.permissions.query({name: 'microphone'})存在行为局限：即使用户已完成授权，重启应用后该API仍可能返回prompt状态，触发重复的权限请求。
• 当前代码未持久化用户的授权状态，每次重启都依赖不可靠的权限查询结果，导致重复请求逻辑触发。

解决方案 #

通过本地存储持久化授权状态，结合权限查询与监听逻辑，规避iOS的API局限，实现仅首次请求权限的效果：

1. 新增本地存储持久化逻辑 #

用户授权成功后，将状态存入localStorage；应用重启时优先读取本地存储的状态，避免重复触发请求。

2. 调整权限检查逻辑 #

保留权限监听机制，处理用户在系统设置中修改权限的场景，同步更新本地存储与应用状态。

修改后的代码示例 #

import React, { createContext, useContext, useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { useAlert } from './alert_context';
import { getIsPWA } from '../pwa/check/is_pwa';
import { InstallAppPrompt } from '../pwa/install_app_prompt';

const PWAContext = createContext(null);

export const PWAProvider = ({ children }) => {
    const location = useLocation();
    const { showAlert } = useAlert();

    const [isPWA, setIsPWA] = useState(getIsPWA());
    const [isMicPermissionGranted, setIsMicPermissionGranted] = useState(false);

    useEffect(() => {
        setIsPWA(getIsPWA());
    }, []);

    useEffect(() => {
        if (isPWA) {
            checkMicrophonePermission();
        }
    }, [isPWA]);

    const isAppRoute = location.pathname.startsWith('/app');
    if (isAppRoute && !isPWA) {
        return <InstallAppPrompt />;
    }

    const requestMicrophonePermission = () => {
        navigator.mediaDevices.getUserMedia({ audio: true })
        .then((stream) => {
            stream.getTracks().forEach(track => track.stop());
            setIsMicPermissionGranted(true);
            // 持久化授权状态到localStorage
            localStorage.setItem('micPermissionGranted', 'true');
        })
        .catch((error) => {
            console.error('Error accessing microphone:', error);
            setIsMicPermissionGranted(false);
            localStorage.setItem('micPermissionGranted', 'false');
        });
    };

    const checkMicrophonePermission = () => {
        // 优先读取本地存储的授权状态
        const savedPermission = localStorage.getItem('micPermissionGranted');
        if (savedPermission === 'true') {
            setIsMicPermissionGranted(true);
            // 校验实际权限，防止用户在系统设置中撤销授权
            navigator.permissions.query({ name: 'microphone' })
            .then((result) => {
                if (result.state !== 'granted') {
                    localStorage.setItem('micPermissionGranted', 'false');
                    setIsMicPermissionGranted(false);
                }
                // 监听权限变化，同步更新状态
                result.onchange = () => {
                    const newState = result.state === 'granted';
                    setIsMicPermissionGranted(newState);
                    localStorage.setItem('micPermissionGranted', newState.toString());
                };
            })
            .catch((error) => {
                console.error('Error checking microphone permissions:', error);
            });
            return;
        }

        // 无本地存储记录时，执行原权限查询逻辑
        navigator.permissions.query({ name: 'microphone' })
        .then((result) => {
            if (result.state === 'granted') {
                setIsMicPermissionGranted(true);
                localStorage.setItem('micPermissionGranted', 'true');
            } else if (result.state === 'prompt') {
                requestMicrophonePermission();
            } else {
                setIsMicPermissionGranted(false);
                localStorage.setItem('micPermissionGranted', 'false');
            }

            result.onchange = () => {
                const newState = result.state === 'granted';
                setIsMicPermissionGranted(newState);
                localStorage.setItem('micPermissionGranted', newState.toString());
            };
        })
        .catch((error) => {
            console.error('Error checking microphone permissions:', error);
        });
    };

    return (
        <PWAContext.Provider value={{ isMicPermissionGranted, requestMicrophonePermission }}>
            {children}
        </PWAContext.Provider>
    );
};

export const usePWA = () => useContext(PWAContext);

关键说明 #

• iOS的navigator.permissions对麦克风权限的查询并非完全可靠，本地存储作为辅助判断可以有效避免重复请求。
• 通过result.onchange监听权限变化，确保用户在系统设置中修改权限后，应用状态能及时同步更新。

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