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 還能夠提供請求許可權功能