浏览器桌面通知Notification实践
一言不合就上图:
最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差别。
websocket通信?浏览器广告推送?html5自动更新?灵异事件?
—————————-我是研究的结果华丽的分割线——————————-
先说下websocket吧,WebSocket 规范是 HTML 5 中的一个重要组成部分,已经被很多主流浏览器所支持,也有不少基于 WebSocket 开发的应用。正如名称所表示的一样,WebSocket 使用的是套接字连接,基于 TCP 协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持,主要用于s/c的数据通信,但以上的例子不是双向通信,而是单项消息推送,客户端只接收消息提示并查看就行了,接下来我在浏览器里找了下,发现了这个:
内容设置-通知-例外管理,发现了消息通知的的来源,是各大网站的设定的端口号,可知其工作原理是服务器端设置好通知服务,在特定时间向客户端推送相关内容,并且此时用户不一定在浏览当前推送网址的来源网页,只要开着浏览器并且没用禁止网站消息通知就可以接收通知,所以相对于以前网页右下方弹出div的提醒方式,这种方式显得比较高大上;
后来在查阅相关资料的时候发现了浏览器桌面通知这个功能,也就是Desktop Notification这个啦,基本的回调方式是这样的
Notification.requestPermission(callback);
比如运行这个浏览器就会提示:
其工作流程大致是检测用户是否同意执行,这个方法用于向用户请求获得消息提醒的权限,调用这个方法将产生如下效果,分别对应着3中状态:“granted”(状态值:0)表示用户同意消息提醒;“default”(状态值:1)表示默认状态,用户既未拒绝,也未同意;“denied”(状态值:1)表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒,这个值保存在一个内部变量中,并且是只读的,通过checkPermission()方法可以提取到这个状态值:
然后如果用户同意执行有权限推送通知了,就可以配置推送消息给浏览器了,看起来很高端的样子。通过new构造,显示通知。
推送方法:new Notification(title, options),其中title是必须参数,表示通知小框框的标题内容,options是可选参数,下面是一些参数的简单说明(实际内容有很长,有兴趣的小伙伴可以看下html5api说明)
lang:提示的语言,这个没啥用吧
body:提示消息的主体内容。会在标题的下面显示
tag:标记当前通知的标签
icon:就是提示的时候显示的图标啦
renotify:是否替换之前的通知项
下面是一个小小验证,小伙伴们可以尝试下,贴一段代码吧,大家一看就明白:
function showNotice() {
//下面的n大写
notification.requestPermission(function (perm) {
if (perm == "granted") {
//new notification的n大写
var notification = new notification("这是一个通知撒:", {
dir: "auto",
lang: "hi",
tag: "testTag",
icon: "https://static.cnblogs.com/images/adminlogo.gif",
body: "通知content"
});
}
})
}
运行这段代码,在浏览器上就会出现,当然前提是浏览支持这玩意:
浏览器支持情况:
呵呵哒,只能在pc端非ie使用,看情况啦,所以微软操作系统做这么牛,占有率这么高,为何内置的浏览器这么…
好啦,辛苦一番算是把这个问题弄明白了,再也不用怀疑有灵异事件了
Notification.requestPermission(function (perm) {
if (perm == "granted") {
var notification = new Notification("这是一个通知撒:", {
dir: "auto",
lang: "hi",
tag: "testTag2345",
icon: "https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png",
body: "通知content2"
});
notification.onclick = function(){open('http://baidu.com');this.close();};
}
}) ;
以上结果如有纰漏欢迎各位小伙伴指正!
浏览器桌面通知Notification实践的更多相关文章
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- 浏览器桌面通知--Notification
前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...
- H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
- 浏览器桌面通知(notifications)
近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...
- h5桌面通知Notification
H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...
- Chrome浏览器扩展开发系列之十:桌面通知Notification
Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...
- HTML5开启浏览器桌面通知 Web Notification
说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...
- 用于浏览器桌面通知的Web API 接口 -notification
notification 接口用于浏览器向用户提供通知内容:常见的如网页版的微信: 1.实现,需要Notifications API 提供的通知接口: 用法: let notification = n ...
- Chrome 桌面通知Notification
今天2016-11-18号,最新chrome版本:V50 在网上找了好久都用不了,因为chrome版本已经是V50了,chrome在V22版本之后就取消掉window.webkitNotificati ...
随机推荐
- 洛谷 P1282 多米诺骨牌("01"背包)
传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 参考资料: [1]:https://blog.csdn.net/Darost/artic ...
- 用webstorm来开发微信小程序之less的配置
1.安装less. 安装好node之后,打开运行-->cmd-->进入安装node的文件夹目录-->输入 npm install -g less. 然后自动就会在C:\Users\A ...
- nginx 耗时原因定位总结
这几天在优化服务器的响应时间,在根据 nginx 的 accesslog 中 $request_time 进行程序优化时,发现有个接口,直接返回数据,平均的 $request_time 也比较大.原来 ...
- python Elasticsearch5.x使用
文档:http://elasticsearch-py.readthedocs.io/en/master/ Elasticsearch官方API文档:https://www.elastic.co/gui ...
- Scala进阶之路-Spark本地模式搭建
Scala进阶之路-Spark本地模式搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark简介 1>.Spark的产生背景 传统式的Hadoop缺点主要有以下两 ...
- docker基础篇
下载,安装 安装Windows社区版 官网地址:https://store.docker.com/editions/community/docker-ce-desktop-windows?tab=de ...
- Object.keys()返回对象的属性
<script> // 传入对象,返回属性名 let obj = { 'a': '123', 'b': '456' } console.log(Object.keys(obj)) //[& ...
- git回滚远程仓库代码/错提master分支的恢复
前言 今天周五了,刚接了个新微服务模块,下班前高高兴兴开发完,提交git代码,jenkins发布到测试环境.突然看到一个提示 我最近提的代码呢?!! 想到可能会提错仓库,转念一想,不对呀,我怎有这么高 ...
- nlogn LIS模板
nlogn 模板 最长上升 #include<bits/stdc++.h> using namespace std; ; int n,x,y,a[N],num[N],d[N],len; / ...
- 属性动画QPropertyAnimation
属性动画QPropertyAnimation 改变大小.颜色或位置是动画中的常见操作,而QPropertyAnimation类可以修改控件的属性值 大小改变动画: import sys from Py ...