Safari浏览器修改位置权限后无需刷新获取位置功能失效

问题原因 #

Safari浏览器会在页面会话初始化时缓存地理位置权限的状态，后续调用navigator.geolocation.getCurrentPosition时会直接使用该缓存状态，不会主动同步系统设置中修改后的权限。因此用户先拒绝权限、再通过浏览器偏好设置改为允许后，当前未刷新的页面仍会认为权限是拒绝状态，导致获取位置失败。

解决方案 #

利用浏览器的Permissions API（Safari 14+支持）来监听地理位置权限的变化，实时获取最新的权限状态，确保调用位置接口时使用的是最新权限。

实现代码 #

// 初始化权限监听
async function setupGeoPermissionListener() {
  if (!navigator.permissions) {
    console.warn('当前浏览器不支持Permissions API，修改权限后可能需要刷新页面');
    return;
  }

  try {
    const permissionStatus = await navigator.permissions.query({ name: 'geolocation' });
    
    // 监听权限变更事件
    permissionStatus.onchange = function() {
      if (this.state === 'granted') {
        // 权限变为允许时，自动尝试获取位置
        fetchUserLocation();
      }
    };
  } catch (err) {
    console.error('查询地理位置权限失败:', err);
  }
}

// 获取用户位置的核心函数
function fetchUserLocation() {
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      // 成功获取位置后的业务逻辑
      console.log('获取位置成功:', pos.coords.latitude, pos.coords.longitude);
    },
    (err) => {
      console.error('获取位置失败:', err.message);
      if (err.code === err.PERMISSION_DENIED) {
        // 提示用户前往浏览器设置开启权限
        alert('请在浏览器偏好设置中开启本网站的地理位置权限');
      }
    },
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 0
    }
  );
}

// 页面加载时初始化监听
window.addEventListener('load', setupGeoPermissionListener);

// 绑定按钮点击事件
document.querySelector('#get-location-btn')?.addEventListener('click', fetchUserLocation);

关键说明 #

1. Permissions API的作用：实时监听权限状态变化，当用户在系统设置中修改权限后，会触发onchange事件，此时可以立即调用位置接口。
2. 降级处理：对于不支持Permissions API的旧版Safari，添加提示信息，告知用户修改权限后可能需要刷新页面。
3. 错误处理：在获取位置失败时，根据错误类型给出针对性提示，引导用户操作。

额外注意事项 #

• 确保网站使用HTTPS协议：Safari在非HTTPS环境下会限制地理位置API的使用，即使权限开启也可能无法获取位置。
• 避免频繁调用位置接口：过度调用可能会触发浏览器的限制，导致接口调用失败。

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