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

时间: 2018-03-29阅读: 1298标签: 桌面

传统实现html消息通知有2种方式:一种是写在标题栏中,通过js不断修改标题内容达到提醒的作用。另外一种是在网页右下角使用div模拟通知栏。这2种方法都具有很大局限性,比如:用户最小化浏览器,或者切换到其他页面就看不到通知了。

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


Notification桌面通知流程

我们来看下如何生成桌面通知的:

1.检查浏览器是否支持Notification 
2.检查浏览器的通知权限(是否允许通知) 
3.若权限不够则获取浏览器的通知权限 
4.创建消息通知 
5.展示消息通知  

 


Notification兼容性:


【注】Notification目前还未标准化。  


Notification语法

let notification = new Notification(title, options)

title:一定会被显示的通知标题

options【可选】: 一个被允许用来设置通知的对象。它包含以下属性: 

dir : 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左) 
lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。 
body: 通知中额外显示的字符串 tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。 
icon: 一个图片的URL,将被用于显示通知的图标。 


Notification实例

<input type="button" value="开启桌面通知" id="btn">
<script>
~ function() {
	var btn = document.getElementById('btn')
	btn.onclick = function() {
		notifyMe()
	}
	function notifyMe() {
		// 首先检查浏览器是否支持
		if(!('Notification' in window)) {
			alert('浏览器不支持桌面提醒')
		}
		//检查是否允许Notification
		else if(Notification.permission === 'granted') {
			newInfo()
		}
		//如果没有拒绝Notification,就申请用户允许
		else if(Notification.permission !== 'denied') {
			//回调模式
			Notification.requestPermission(function(permission) {
				if(permission === 'granted') {
					newInfo()
				}
			})
			// Notification.requestPermission().then(//promise
			//     newInfo()
			// )
		}
	}
	function newInfo(title, options) {
		title = title || '新的消息'
		options = options || {
			body: '默认消息',
			icon: ''
		}
		return new Notification(title, options)
	}
}()
</script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/569

关闭

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