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 还能够提供请求权限功能
- RxJS速成
- 会HTML/CSS就可以轻松创建网站
- 区块链银行应用探索(Hyperledger fabric)
- mysql之基本语法
- mysql之索引的工作机制
- Mysql之锁与事务
- 独家 | 教你实现数据集多维可视化(附代码)
- NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景
- cf--------(div1)1A. Theatre Square
- 离线网页制作器(beta1.0)
- uva---(11549)CALCULATOR CONUNDRUM
- CF---(452)A. Eevee
- MySQL排序内部原理探秘
- Uva----------(11078)Open Credit System
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python操作txt文件中数据教程[2]-python提取txt文件中的行列元素
- JSON 是什么?它能带来什么?它和 XML 比较?
- 一起来学演化计算-实数空间变异算子
- 卡特兰数入门
- 常见编程模式之动态规划:0-1背包问题
- stat 命令家族(2)- 详解 pidstat
- MTO和MaTO MMZDT
- stat 命令家族(3)- 详解 mpstat
- 知识图谱入门(一)
- PHP判断变量内容是什么编码(gbk?utf-8) mb_detect_encoding
- stat 命令家族(4)- 详解 iostat
- PHP将数组存入数据库中的四种方式
- 序列化与json性能评测
- js内存泄漏常见的四种情况(From LeuisKen)
- 「R」Rprofile:R 全局设置