如何查询DeviceMotionEvent权限状态及修改权限请求弹窗文本

1. 检测DeviceMotionEvent权限是否已授予 #

可以实现权限状态检测，分为两种实现方式：

• 调用权限申请接口同步获取状态
  你当前使用的DeviceMotionEvent.requestPermission()接口返回的Promise结果本身就会返回当前权限状态，返回值包含三类：granted（已授权）、denied（已拒绝）、prompt（未发起过授权申请），调用该接口如果是未申请状态会自动弹出授权弹窗。
• 静默检测不触发授权弹窗
  针对iOS 15+、Chrome 67+以上版本，可以通过标准Permissions API静默查询权限状态，无需触发弹窗：

// 静默检测权限状态示例
async function checkMotionPermission() {
  if (!navigator.permissions) return 'unsupported';
  const accelPerm = await navigator.permissions.query({name: 'accelerometer'});
  const gyroPerm = await navigator.permissions.query({name: 'gyroscope'});
  if (accelPerm.state === 'granted' && gyroPerm.state === 'granted') {
    return 'granted';
  } else if (accelPerm.state === 'denied' || gyroPerm.state === 'denied') {
    return 'denied';
  }
  return 'prompt';
}

低于iOS 15的设备没有静默查询能力，只能通过调用requestPermission()接口获取权限状态。 #

2. 修改权限弹窗提示文本 #

浏览器弹出的权限提示文本属于浏览器原生控制的安全策略内容，不支持开发者自定义修改。你看到的localhost标识是因为当前代码运行在本地开发环境，当你把站点部署到正式域名后，弹窗会自动将localhost替换为你的正式站点域名，无需额外配置。 #

现有代码修正 #

你提供的代码存在语法错误，if判断条件缺失括号，修正后的可用代码如下：

public requestDeviceMotion() {
    if (typeof (DeviceMotionEvent as any).requestPermission === 'function') {
      (DeviceMotionEvent as any).requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('devicemotion', () => { /* 你的业务逻辑 */ });
          }
        })
        .catch(console.error);
    } else {
      // 处理非iOS 13+设备，默认直接可用
      window.addEventListener('devicemotion', () => { /* 你的业务逻辑 */ });
      console.log("not iOS 13+ device");
    }
 }

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