Navigator.permissions.query：地理位置 onChange 在 Firefox 中不起作用答案

【问题标题】：Navigator.permissions.query: Geolocation onChange not working in FirefoxNavigator.permissions.query：地理位置 onChange 在 Firefox 中不起作用
【发布时间】：2019-08-03 06:06:18
【问题描述】：

我正在尝试使用权限 API：https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query Firefox应该支持哪个。（我目前使用的是 Firefox 开发者版 66.0b14）。

我有一个最初检查用户权限的页面。类似的东西；

if (navigator.permissions) {
  navigator.permissions.query({ name: 'geolocation' }).then(result => {
    if (result.state === 'granted') {
      this.getCurrentPosition()
    } else if (result.state === 'prompt') {
      this.getCurrentPosition()
      console.log('Permissions requested. Waiting for user input...')
    } else if (result.state === 'denied') {
      this.locationError = true
    }
    result.onchange = event => {
      if (event.target.state === 'granted') {
        this.locationError = false
        this.getCurrentPosition()
        console.log('Thanks for letting us know...')
      } else if (event.target.state === 'denied') {
        this.locationError = true
      }
    }
  })
}

例如，现在这在 Chrome 中运行良好。（顺便说一句：我使用 this.locationError 来显示一些信息窗口，说明该应用程序只能在启用位置服务的情况下工作）

无论如何，如果我在 Firefox 中打开它，我会得到预期的提示：现在，如果我选中“记住此决定”框并发送允许/阻止，我会看到 onchange 已按预期执行，让我有可能对用户的决定做出反应。

但是，如果我不选中此框，而只是拒绝或允许一次，则不会调用 onchange，让我不知道实际发生了什么。而且这个状态仍然是“提示”的。

我还尝试设置一个时间间隔以在一段时间后再次检查权限，但它再次打开询问权限的提示。状态永远不会从“提示”更新或更改为“拒绝”或“授予”。

是我遗漏了什么，或者这是一个 Firefox 错误。

感谢任何提示

干杯

【问题讨论】：

我也遇到了这个问题。似乎有点奇怪，因为如果您拒绝并且不选中记住框，即使 permissionstatus.state 仍然显示提示，用户拒绝它的事实似乎被记住了。这似乎与直觉相反：如果有一个用于记住最终用户选择的复选框，并且最终用户没有选中该框，那么记住该选择的事实就没有意义......跨度>
@JakeSmith 但至少应该在该会话中记住它，对吧？
我不明白为什么我应该做出这样的假设。但我不知道。如果用户不说记住，那么记住它不应该是我的假设。该应用不应不断地向用户请求许可，但如果不允许该应用再次请求许可，我看不出用户如何改变主意。

标签： javascript firefox geolocation navigator

【解决方案1】：

我无法让 onchange 函数或更改事件在 Firefox 上工作，但能够找到一种解决方法，该方法同样可以识别权限更改：

注意：此修复仅适用于您使用 geolocation.getCurrentPosition

  navigator.permissions.query({
    name: 'geolocation'
  }).then(function(result) {
      
    const onLocationFetchSuccess = (position) => {
      /*
         Consume location coordinates here and proceed as required
         using position.coords.latitude and position.coords.longitude
      */
    };

    const onLocationFetchFailure = (error = {}) => {
      // Error code 1 corresponds to user denying/blocking the location permission
      if (error.code === 1) {
        // Respond to failure case as required
      }
    };

    navigator.geolocation.getCurrentPosition(onLocationFetchSuccess, onLocationFetchFailure);

    if (result.state === 'denied') {
      onLocationFetchFailure();
    }

    // This will still work for Chrome
    result.onchange = function() {
      if (result.state === 'denied') {
        onLocationFetchFailure();
      }
    }
  })

此解决方案将触发两次 Chrome 浏览器的故障案例。为了避免这种情况，可以检查当前浏览器以有条件地阻止将 onLocationFetchFalure 回调发送到 Chrome 浏览器的 getCurrentPosition。

TLDR;这里的解决方法是，我们不依赖于触发change 事件/onchange 函数，而是将错误回调传递给getCurrentPosition，当通过权限对话框更改位置权限时触发该回调。当用户拒绝/阻止位置权限时，此错误回调提供错误代码1。

【讨论】：