Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Permissions API

Permissions API

作者头像
mmzhou
发布于 2018-08-01 10:50:38
发布于 2018-08-01 10:50:38
99200
代码可运行
举报
文章被收录于专栏:前端小作坊前端小作坊
运行总次数:0
代码可运行

Permissions API

这篇文章翻译自HTML5ROCKS的Permissions API

如果你以前使用过Geolocation API,那么你很可能希望可以检查自己是否有权限来使用Geolocation API并且不展示确认框。这个简单的愿望目前是不可能的。你必须要先请求获取目前的位置,然后或许能拿到位置,这表示你有权限。也有可能弹出一个确认框给用户确认是否给权限。

并不是所有的API都是这样工作的。Notification API提供了Notification.permission来让你可以检查自己是否有权限。

Web平台的API一直在发展,现在有必要提供一个标准的方法来让开发者统一检查权限。而不是记住每种API的使用方法。Chrome 43版本提供了Permision API,这个APi提供了统一的方法来检查权限状态。

permissions.query()

permissions.query()方法可以用来检查是否有权限。它会返回三种状态:granted(有权限)、denied(没有权限)或者prompt(需要用户确认)。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// Check for Geolocation API permissions
navigator.permissions.query({name:'geolocation'}).then(function(permissionStatus)
{
    console.log('geolocation permission status is ', permissionStatus.status);
    permissionStatus.onchange = function() {
        console.log('geolocation permission status has changed to ', this.status);
    };
});

query方法的输入是一个PermissionDescripter对象,你可以在这个对象上定义权限的名字。方法的返回结果是一个Promise对象,用于异步获取PermissionStatus对象。你可以检查这个对象的status值来检查权限。你也可以监听permissionStatus.onchange事件,来处理权限状态改变的情况。

支持的PermissionDescriptors

在上面的样例中,我们知道了如何检查Geolocation API的权限,所用的权限描述对象为:{name:'geolocation'}

Notification API的权限描述对象也是类似的,只需要一个name属性:{name:'notifications'}

Pushmidi API则有一个各自特有的额外参数。

对于Push API的权限检查,你可以提供一个userVisible参数。这个参数表明了你是否想让每条信息都显示一个通知,如果不显示通知则便是静默处理每条push信息(目前Chrome仅仅支持有通知的push信息)。你可以这样使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
navigator.permissions.query({name:'push', userVisible:true})

Midi API有一个sysex参数。这个参数表明了你是否需要系统排除信息。Midi的权限检查方法如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
navigator.permissions.query({name:'midi', sysex:true})

请求获取权限

对用户来说,请求获取指定API权限的方法都各不相同。例如,Geolocation API会在你调用getCurrentPosition()时弹出一个确认框给用户。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Geolocation permissions granted');
    console.log('Latitude:' + position.coords.latitude);
    console.log('Longitude:' + position.coords.longitude);
});

在调用Notification.requestPermission()方法时也会弹出一个确认框给用户,代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Notification.requestPermission(function(result) {
    if (result === 'denied') {
        console.log('Permission wasn\'t granted. Allow a retry.');
        return;
    } else if (result === 'default') {
        console.log('The permission request was dismissed.');
        return;
    }
    console.log('Permission was granted for notifications');
});

这里想强调的是:Permission API允许你使用一个统一的方法来检测一系列Web API的权限。这带来的巨大优势就是:允许你只给那些没有确认过权限的用户弹出确认框。这将大大提高用户的体验。你可以在你有权限时充分利用这些API打造更棒的体验。

这里有一系列使用样例

浏览器支持

Chrome是以第一个实现这个API的浏览器,Mozilla正在计划提供这个功能,并且Microsoft也对这个API感兴趣。

已知的问题

Geolocation API在用户忽略权限确认框后,再次请求不会显示确认框。并且这是Permission状态值为prompt。这显然是不合理的。[crbug.com/476509]

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Permission API 统一查询权限状态
Permission API 统一查询权限状态 Permission API 不是一个新的标准,早在 2015 年,就已经成为标准。这个 API 的主要作用就是提供一个统一的查询 API 权限的接口。
JS菌
2019/04/10
1.2K0
Permission API 统一查询权限状态
未来网站开发必备:14个让你惊艳的JavaScript Web API!
快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群,一起找bug,另外新版作图神器已上线 https://cube.waixingyun.cn/home
前端小智@大迁世界
2023/07/09
6390
未来网站开发必备:14个让你惊艳的JavaScript Web API!
一个新的 HTML 元素:<permission>!
Chrome 126 于近期发布了稳定版本,其中一个比较有意思的更新是给 HTML 带来一个新的元素:<permission> ,它将从这个版本开始试用,并且正在努力走向标准化。
ConardLi
2024/06/18
2680
一个新的 HTML 元素:<permission>!
H5的Notification特性 - Web的桌面通知功能
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/49
joshua317
2021/08/31
2.3K0
H5的Notification特性 - Web的桌面通知功能
Storage API简介和存储限制与逐出策略
对于现代浏览器来说,为了提升效率和处理更加复杂的客户端操作,通常都需要将数据存储在客户端,也就是本地磁盘上。那么这个存储有没有什么限制?如果数据存满了之后,如何进行数据的淘汰和置换?
程序那些事
2020/11/03
7230
Storage API简介和存储限制与逐出策略
《PWA实战:如何为你的网站增加离线功能和推送通知》
🐯 猫头虎博主 为您解读:PWA(Progressive Web Apps)的强大功能如何为您的网站带来革命性的用户体验。我们将探讨离线功能和推送通知的实现,以及如何利用这些特性提高用户留存。 PWA入门、离线功能实现、推送通知技巧、提高用户留存。
猫头虎
2024/04/09
4880
HTML5(二)——获取用户位置Geolocation
地图类、打车、外卖等类型的手机APP,一进入便咨询是否允许获取我们的位置,允许之后会根据我们所在位置推荐好物,逐渐地 H5 网页也开始获取用户位置。Geolocation是 H5 新增的对象,用于定位。常见打开网页有两种方式:移动端和PC端。它们是根据什么如何定位的呢?
呆呆
2021/09/29
1.6K0
[html5] (Notification) 桌面通知
[html5] (Notification) 桌面通知 前几天要做一个桌面通知的功能,翻查以前做的笔记,发现webkitNotifications这个已经不能用了,baidu了下,基本都是介绍webkitNotifications的,后来在SOF上找到答案,现在chrome支持的是Notification,估计是W3C标准化了。api也变了,mark之。 ---- Notification Properties title:"别动神仙说:" body:"这里是body" icon:"http://q4.ql
用户1631416
2018/04/11
1.3K0
[html5] (Notification) 桌面通知
浏览器定位navigator.geolocation.getCurrentPosition
浏览器定位是可以使用javascript直接获取当前你的网络所在的位置信息,主要方法为
XiaoA
2023/07/24
1.3K0
Web Notification桌面推送消息
以上的问题其实都很好解决,MDN 上有很多配置可以去看一下,配置啥,图标呀,图片呀,标题呀,是否强制用户交互呀,等等的操作都在MDN 有介绍,接下来的我觉得才可以看看
我乃小神神
2020/04/30
1.7K0
HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在这里简单的介绍一下如何实现这样的功能。 1、实现标签页闪烁效果 实现的效果: 当前窗体失焦的时候,标题开始闪动,当前窗体获取焦点的时候,则停止闪动。 注意:这里需要用到窗口的获取焦点和失去焦点的方法,由于IE和其他Chrome及FireFox的区别,这里需要用到的方法就不一样,具体是:   Chrome和FireFox浏览器是window的onf
用户1174387
2018/03/28
2.5K0
HTML5中的Web Notification桌面通知
网站在线客服系统新消息提醒功能,支持浏览器桌面通知提醒,网页新消息声音,标题闪动效果功能实现
当我们的网站收到一条新消息的时候,需要能通知给正在访问网页的人员 浏览器打开的情况下,可以展示在电脑桌面右下角 //浏览器桌面通知 function notify(title, options, callback) { // 先检查浏览器是否支持 if (!window.Notification) { console.log("浏览器不支持notify"); return; } options.body=replaceHtml(options
唯一Chat
2023/02/17
1.3K0
网站在线客服系统新消息提醒功能,支持浏览器桌面通知提醒,网页新消息声音,标题闪动效果功能实现
To add browser notifications to an online customer support live chat service system - gofly - self h
There are a number of benefits to adding browser notifications to an online customer service system, including:
唯一Chat
2023/01/05
3050
在线客服系统源码开发实战总结:H5 Notifications浏览器桌面通知
如果自己在弹出授权申请的时候,点击了拒绝,那么可以去浏览器的通知设置里面重新打开下
唯一Chat
2022/11/21
1K0
在线客服系统源码开发实战总结:H5 Notifications浏览器桌面通知
Web Notification 让浏览器实现系统级消息通知
前段时间有个需求,系统有即时消息的功能,要求在收到消息后能有一个比较明显的提示,即使是在浏览器最小化的时候也能看到提醒。
德顺
2024/05/15
1.1K0
Web Notification 让浏览器实现系统级消息通知
React Native之Permissions权限适配
做过Android开发的同学都知道,在Android6.0版本之后,系统新增了运行时权限RuntimePermission,这个或许是借鉴的苹果吧(ps,关于详细的介绍请查看: Android 6.0 运行时权限适配)。那么,在RN开发中,怎么适配Android6.0以上版本呢?其实,RN为Android同学提供了PermissionsAndroid模块,用来访问Android M(也就是6.0)权限模型。 对于Android 6.0以上版本来说,系统将权限分为普通权限、敏感权限和危险权限。有一些普通权
xiangzhihong
2018/02/06
2.2K0
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法
获取剪切板权限,如果是在 F12 控制台执行,需要在 5 秒内点击一下网页内容,这个是只有焦点在页面里才可以用,因为只支持 https 协议,所以要焦点在页面内才能判断是否是该协议,http 地址被 chrome 认为是不安全的连接。
小蓝枣
2020/09/24
2.6K0
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法
Notification API,为你的网页添加桌面通知推送
其实,MDN 的说明已经可以让我们很清楚知道 Notification 的作用。Notification 能够为用户提供异步的桌面消息通知,即使你缩小浏览器或是活动在其他标签页,只要调用该 Api 的标签页没被关闭,它都能工作。在桌面端的浏览器中,除了 IE 不支持外,其他就均已支持。
WahFung
2020/08/24
2K0
Notification API,为你的网页添加桌面通知推送
聊聊HTML5中的Web Notification桌面通知
这种桌面提示是HTML5新增的 Web Push Notifications 技术。
Daotin
2019/07/28
2.4K0
H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的。实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分享给大家,希望能帮你们了解这个API。
OBKoro1
2020/10/27
1.9K0
H5 notification浏览器桌面通知
推荐阅读
相关推荐
Permission API 统一查询权限状态
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验