为什么使用HTML Notification
在HTML5 Notification之前的通知主要有两种。一种是写在标题栏中,使用js不断的更改标题内容达到提醒的作用。另外一种是在网页右下角用div
模拟通知栏。两种方法的都有很多局限性,比如如果用户最小化浏览器,就看不到通知了。使用Notification则不会出现这样的问题。下面是一个简单的实例。
Notification兼容情况
【注】Notification目前还未标准化。
使用Notification的流程
- 检查浏览器是否支持Notification
- 检查浏览器的通知权限
- 如果权限不够则申请获取权限
- 创建消息通知
- 展示消息通知
Notification API
属性
静态属性
Notification.permission
静态属性,只读,表示是否允许通知,可能的值有3个:granted,denied,default
实例属性
这些属性仅在 Notification 的实例中有效。
- Notification.title 只读 (moz only) 在构造方法中指定的 title 参数。
- Notification.dir 只读 通知的文本显示方向。在构造方法的 options 中指定。
- Notification.lang 只读 通知的语言。在构造方法的 options 中指定。
- Notification.body 只读 通知的文本内容。在构造方法的 options 中指定。
- Notification.tag 只读 通知的 ID。在构造方法的 options 中指定。
- Notification.icon 只读 通知的图标图片的 URL 地址。在构造方法的 options 中指定。
事件处理
- Notification.onclick
处理 click 事件的处理。每当用户点击通知时被触发。 - Notification.onshow 处理 show 事件的处理。当通知显示的时候被触发。
- Notification.onerror 处理 error 事件的处理。每当通知遇到错误时被触发。
- Notification.onclose 处理 close 事件的处理。当用户关闭通知时被触发。
方法
静态方法
Notification.requestPermission()
静态方法,用于征求用户同意是否启用通知。如果调用会出现下面的窗口:
实例方法
Notification.close()
用于关闭通知。
简单的实例
~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()
}
})
//promise
// Notification.requestPermission().then(
// newInfo()
// )
}
}
function newInfo(title, options) {
title = title || '新的消息'
options = options || {
body: '默认消息',
icon: ‘’
}
return new Notification(title, options)
}
}()
参考
http://caniuse.com
https://developer.mozilla.org/zh-CN/docs/Web/API/notification