Navigator.permissions.Query:GeoLocation Onchange不在Firefox中工作

Question

我正在尝试使用权限API：https：//developer.mozilla.org/en-us/docs/web/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按预期执行，使我有可能在用户决定中做出反应。

但是，如果我不选中此框，而只是拒绝或允许一次，则没有调用on Change，而我的实际发生了什么。而且，这个状态仍然是"提示"。

我还尝试设置一个间隔以在一段时间后再次检查权限，但是再次可以打开提示，要求征得许可。国家从不更新或更改从"提示"更改为"被拒绝"或"授予"。

我缺少某些东西，还是这是一个firefox错误。

感谢您的任何提示

欢呼

Answer 1

我无法获取on Change功能或更改事件以适用于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();
      }
    }
  })

此解决方案将对镀铬浏览器两次触发故障情况。为了避免，可以检查当前浏览器以防止将onLocationFetchFalure回调发送到getCurrentPosition以获取Chrome浏览器。

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