Permission API 统一查询权限状态

Permission API 统一查询权限状态

Permission API 不是一个新的标准，早在 2015 年，就已经成为标准。这个 API 的主要作用就是提供一个统一的查询 API 权限的接口。 ?

如果我们使用 Notification API，那么需要这样操作：

Notification.requestPermission().then(function (permission) {
    if (permission === 'granted') {
        let notification = new Notification('helloooooo')
    } else if(/* ... */) {
        // ...
    } else {
        // ...
    }
})

首先要调用 requestPermission 方法，然后在回调函数中检查 permission 参数是否为 granted 如果是那么证明已经获取到权限，则可以创建 Notification 实例

然后再看看 Geolocation API 是如何获取权限的：

navigator.geolocation.getCurrentPosition(console.log, console.error)

哦吼？不需要显式调用并验证是否为获取到权限，而是通过回调函数来做检查 ?

所以，有的时候就会导致混乱，Permission API 这个玩意就是为了解决这个标准不统一的问题的

那么具体怎么用呢 ❓

这里的 permission 就是指 navigator.permissions 他有一个 query 方法，用来查询权限状态：

navigator.permissions.query({ name: 'geolocation' }).then(status => {
    console.log(`当前状态 ${status.state}`)
    // status 是一个 PermissionStatus 的实例
})

接收一个对象，这个对象的属性 name 为需要查询的 API 的名称，效果如下：

他有三种状态分别是：

• granted
• denied
• prompt

这个 PermissionStatus 还有一个 change 的事件，可以监听这个事件针对权限变化做进一步处理

同样的对于 Notification 也是传入参数到 query 来查询：

navigator.permissions.query({ name: 'notifications' }).then(status => {
    console.log(`当前状态 ${status.state}`)
    status.onchange = function() {
        console.log(`状态改变 ${this.state}`, this.state)
    }
})

效果如下：

当然如果需要获取权限，那么还是需要根据特定的 API 来编写代码，Permission 只提供查询的功能 ?

补充：

查询到浏览器还支持 navigator.permissions.request 和 navigator.permissions.requestAll 方法，用来请求权限，尝试如下：

navigator.permissions.request({ name: 'geolocation' }).then(console.log)

浏览器会弹出并询问是否授权：

那么这样一来 Permission 还能够提供请求权限功能