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