开发者社区> sunsky303> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

浏览器桌面通知Notification实践

简介:   一言不合就上图:   最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差别。
+关注继续查看

 

一言不合就上图:

浏览器桌面通知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的数据通信,但以上的例子不是双向通信,而是单项消息推送,客户端只接收消息提示并查看就行了,接下来我在浏览器里找了下,发现了这个:

浏览器桌面通知Notification探究

 

内容设置-通知-例外管理,发现了消息通知的的来源,是各大网站的设定的端口号,可知其工作原理是服务器端设置好通知服务,在特定时间向客户端推送相关内容,并且此时用户不一定在浏览当前推送网址的来源网页,只要开着浏览器并且没用禁止网站消息通知就可以接收通知,所以相对于以前网页右下方弹出div的提醒方式,这种方式显得比较高大上;

后来在查阅相关资料的时候发现了浏览器桌面通知这个功能,也就是Desktop Notification这个啦,基本的回调方式是这样的

Notification.requestPermission(callback);

比如运行这个浏览器就会提示:

浏览器桌面通知Notification探究

其工作流程大致是检测用户是否同意执行,这个方法用于向用户请求获得消息提醒的权限,调用这个方法将产生如下效果,分别对应着3中状态:“granted”(状态值:0)表示用户同意消息提醒;“default”(状态值:1)表示默认状态,用户既未拒绝,也未同意;“denied”(状态值:1)表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒,这个值保存在一个内部变量中,并且是只读的,通过checkPermission()方法可以提取到这个状态值:

浏览器桌面通知Notification探究

 

然后如果用户同意执行有权限推送通知了,就可以配置推送消息给浏览器了,看起来很高端的样子。通过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"  
            });  
        }  
    })  
}

运行这段代码,在浏览器上就会出现,当然前提是浏览支持这玩意:

浏览器桌面通知Notification探究

浏览器支持情况:

浏览器桌面通知Notification探究

 

呵呵哒,只能在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();};
        }  
    }) ;

  

 

 

以上结果如有纰漏欢迎各位小伙伴指正!

谋胆并重

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Chrome浏览器使用Notification通知消息推送
Chrome浏览器使用Notification通知消息推送
235 0
精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)
本文是笔者写组件设计的第十篇文章, 今天带大家实现一个比较特殊的组件——通知提醒框(Notification)。 该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样,通过引入组件标签来调用。
372 0
Notification 浏览器的消息推送
Notification 对象,存在于window上,可以生成一个通知对象以推送推送浏览器消息通知。 这玩意兼容性不咋地,实不实用看场景。对外用户的应用,自然是鸡肋功能,因为你无法知道用户使用的是哪家哪版本的浏览器;对内部系统的帮助则是很大,内部员工使用的浏览器是可控的,为了实现更大的工作效率,该功能可用于比如站内消息、跟踪事务状态变化等的通知,并且,这玩意只要不关闭通知所在的网页,即使浏览器活动标签不是这个网页,依然可以弹出通知,这样就可以在做其他工作的同时及时收到需要的消息了。
1271 0
iOS Notification(本地通知)
代码 #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { ...
789 0
使用NoNotifications控制ubuntu系统通知
概述 在用ubuntu的时候,有时候人家在后面看你玩电脑,然后女生微信发过来了,这个时候就特别尴尬,比如这个文章的图片那样子,怎么解决?使用下面这个软件就好了 名字叫NoNotifications 安装 安装很简单啦,三步走,安装软件源,更新软件源信息,安装就好了...
858 0
Android - Notification
Android - Notification 使用 Android L ; Android Studio 14 使用过程 NotificationManager - 用于提示的管理,例如发送、取消 NotificationCompat.Builder - Builder模式构造notification;可参考《Effective Java》第2条 Notification - 提示,能够显示在状态栏和下拉栏上;构造实例能设定flags NotificationDemo 本例意在记录android notification的使用方法。
695 0
+关注
sunsky303
php、go、linux、异步编程、geeker、hacker
文章
问答
文章排行榜
最热
最新
相关电子书
更多
钉钉客户端自动化的应用
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载