web端Notification桌面消息通知推送功能的实现

更新日期: 2019-08-10阅读: 3.1k标签: 桌面

需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到html5 Web Notification 这个api了。

  

Notification 弹出一个通知在桌面右下角:

if(!("Notification" in window)) {
	//alert("This browser does not support desktop notification");
}
if(Notification.permission !== 'denied') { //判断是否授权,没授权先授权在通知
	Notification.requestPermission(function(permission) {
		// 如果用户同意,就可以向他们发送通知
		if(permission === "granted") {

			var notice_ = new Notification('通知', {
				body: '你有一条信息'
			});
			notice_.onclick = function() { //单击消息提示框,进入浏览器页面
				window.focus();
			}
		}
	});
}
if(Notification.permission === 'denied') { //已授权直接通知
	Notification.requestPermission(function(permission) {
		// 如果用户同意,就可以向他们发送通知
		if(permission === "granted") {

			var notice_ = new Notification('通知', {
				body: '你有一条信息'
			});
			notice_.onclick = function() { //单击消息提示框,进入浏览器页面
				window.focus();
			}
		}
	});
}

备注:

1. 谷歌浏览器需要是https的网址,不然会提示不安全, 不能修改通知权限,无法实现弹框。

2.如果这段代码放在html中执行,一定要创建虚拟服务器,即用域名访问,如:localhost,不能直接用file:index.html 这样的路径访问,因为这个不是http协议,浏览器不接受本地文件的通知设置。

3.如果之前没有为该域名请求权限,则不会有弹窗。选择【允许】,则可以进行桌面推送。


Notification使用说明:

Notification.permission这是一个静态属性,有3个值,default, granted, denied 

default表示还没有发出过请求,或者之前请求过,但是用户并没有允许或者禁止,二是直接关闭窗口。这种状态下是不会有通知的。 
granted表示之前向用户请求过权限,而且用户已经允许了。 
denied表示之前向用户请求过权限,但是用户已经拒绝了。 

new Notification(title, options),其中title是必须参数,表示推送消息框的标题内容,options是可选参数,下面是一些参数的简单说明(一些常用的,其他的有兴趣的可以自己去了解)

lang:提示的语言 
bady:提示消息的主体内容 
tag:标记当前通知的标签 icon:左边的显示头像或者图标 
renotify:是否替换之前的通知项 

事件句柄 

Notification.onclick 处理 click 事件的处理。每当用户点击通知时被触发。 
Notification.onshow 处理 show 事件的处理。当通知显示的时候被触发。 
Notification.onerror 处理 error 事件的处理。每当通知遇到错误时被触发。 
Notification.onclose 处理 close 事件的处理。当用户关闭通知时被触发。


兼容性

最后就是该API的兼容性啦,IE就直接被抛弃了 。只能在pc端非ie使用,但是目前市场上IE的使用率也越来越低了。


链接: https://www.fly63.com/article/detial/4598

如何利用HTML5打造桌面应用,介绍基于Nodejs实现搭建跨平台桌面应用的框架

总结html5+javascirpt+Css实现搭建跨平台桌面应用的框架,如何利用HTML5基于node.js打造桌面应用,实现轻量级桌面应用的捷径开发。

nativefier_将web网页封装成可执行的桌面应用程序

给大家介绍一个工具快速将网站封装成可执行的桌面应用程序的工具:nativefier。nativefier是一个命令行实用工具,基于Node.js很容易的把Web站点创建成一个可执行桌面应用程序。

html5 桌面通知_如何使用 HTML5 的 Notification API

html5的Notification就可以很好的解决这些问题。Notification生成的消息是不依附于某个页面,仅仅依附于浏览器,所以无论你在看那个页面,浏览器是否最小化,只有有消息推送都能看到。

HTML5显示桌面通知Notification

Notification.permission一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)。

5个开发桌面应用程序的JavaScript框架

很久以前,开发客户端桌面程序需要我们掌握各种复杂的技术,不过现在,我们只需要使用js就可以开发出桌面应用程序,下面我们盘点5个开发桌面应用程序的框架。

Notification桌面通知实践

Notifications API 的通知接口用于向用户配置和显示桌面通知。requestPermission()方法可以做此事情,返回值有三个 granted(允许), denied(拒绝) 或者 default(默认)。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!