如何检测navigator.vibrate是否满足可调用条件

权限检测说明 #

目前没有原生JavaScript API可以直接查询navigator.vibrate的临时调用权限，浏览器未对外暴露该类用户交互激活状态的查询接口。

可行检测方案 #

方案1：零时长振动测试（最推荐） #

navigator.vibrate的返回值本身代表调用是否成功，传入参数0时会执行权限校验但不会产生任何实际振动效果，用户完全无感知，可直接用这个特性做权限检测：

// 检测振动API是否可用且有权限调用
function canUseVibrate() {
  if (typeof navigator.vibrate !== 'function') return false;
  // 零时长振动仅做权限校验，无触觉反馈
  return navigator.vibrate(0);
}

每次需要触发振动前先调用该函数判断即可，无需维护全局状态，也能完美规避多指触摸场景的异常问题。

方案2：优化原触摸事件逻辑 #

如果需要复用全局状态减少检测次数，可以调整原有逻辑，首次触摸时直接做权限校验而非仅修改标记位：

let vibrateEnabled = false;
document.addEventListener('touchstart', () => {
  if (vibrateEnabled) {
    navigator.vibrate(200);
    return;
  }
  // 首次触摸直接校验权限
  const testPass = navigator.vibrate(0);
  if (testPass) {
    vibrateEnabled = true;
    navigator.vibrate(200);
  }
});

注意事项 #

• 部分安卓定制ROM或浏览器设置会全局禁用网页振动能力，此时即使用户有交互canUseVibrate也会返回false，业务逻辑需做好降级兼容。
• 零时长振动的检测逻辑仅适用于振动API，其他需要用户激活的API（如自动播放音频、全屏等）不适用该方案。

内容的提问来源于stack exchange，提问作者Vélimir