HTML5特性——Notification
本文和大家分享的主要是html5的特性Notification相关内容，一起来看看吧，希望对大家学习html5有所帮助。
Notification简介
在传统的网页体验中，当用户不在浏览网页时，无法由浏览器主动告知用户有新信息，必须等到用户重新开始浏览网页才知道有新消息，这对一些时效性要求比较强的网页应用来说是个很大的问题。
Notification是HTML5实现的一个消息通知机制，用来为用户设置和显示桌面通知，即会在桌面的右下角弹出一个长方形带消息的窗口，无论用户是否在浏览你的网页。
但是因为各种浏览器对Notification特性的支持不一，所以会出现Notification、webkitNotification和mozNotification的三种实现，而且在不同类型和版本的浏览器下提供的参数和API不一致，这对开发很不友好
因此在这里推荐使用 HTML5-Desktop-Notifications 这个polyfill，它对Notification进行了实现，使开发者不必考虑浏览器兼容性，可以方便地使用Notification特性
注意！必须在服务器中运行才会有桌面通知效果！
Notification的简单实例
下面我们来看具体的Notification实例
检测特性可用性
在正式演示Notification之前，我们需要先验证Notification是否被支持：
验证能否使用Notification
var validate_notification-btn = document.getElementById("validate-notification-btn");
validate_notification-btn.onclick = function (e){
if (Notification != null) {
alert("notification可用!");
} else {
alert("notification不可用!");
}
}
使用上面这段代码，可以验证Notification垫片是否已经发挥了作用
发送一个简单的Notification
使用
如何使用Notification
function notify(){
var notification = new Notification("嗨(⊙▽⊙)", {
body: "这里是一个提醒的正文哦⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
icon: '/images/head.jpg'
});
}var test1_notification_btn = document.getElementById("test1-notification-btn");
test_notification_btn1.onclick = function(e){
if (Notification.permission === "granted") {
notify();
} else {
Notification.requestPermission(function(permission){
if (permission === "granted") {
notify();
}
});
}
}
Notification的内容介绍
静态属性
Notification的静态属性： permission —— 表明通知授权状态的字符串，它的值有三个：
1. denied 表示用户拒绝了通知的显示
2. granted 表示用户允许了通知的显示
3. default 表示默认状态，因为不知道用户的选择，所以浏览器的行为与denied时相同
4. notsupported 在使用了HTML5-Desktop-Notifications垫片之后，会有第四个值，表示浏览器不支持(未实现）Notification特性
静态方法
Notification的静态方法： requestPermission() —— 向用户请求允许使用Notification，但是这个方法只能通过用户行为调用（例如点击），其他方式无法调用。
使用这个方法时可以传入一个回调函数，这个回调函数有一个参数，参数的值为请求之后的通知授权的状态
requestPermission方法
Notification.requestPermission(function (status){
console.log(status);
})
你也可以用then的异步方法完成操作：
requestPermission方法
Notification.requestPermission().then(function(status){
console.log(status);
})
构造函数(初始化方法)
Notification的初始化方法为：
requestPermission方法
1var notification = new Notification(title,options);
title是一个字符串，表示这个通知的标题
options是一个对象，是一个可选参数，根据options包含的属性对Notification进行设定
实例属性
构造方法会返回一个notification实例，可以直接访问这个实例下的各种实例属性
· title ：通知内所显示的文本标题,用构造方法的第一个参数初始化
· body ：通知内所显示的文本内容
· icon ：通知左侧显示的图片，一个字符串，表示图片的URL地址
· dir ：通知文本的显示方向，有三个参数：”auto”,”ltr”,”rtl”（但是好像没有什么区别）
· lang ：通知使用的语言（不常用）
· tag ：通知的ID，是一个字符串，用于区分不同的Notification。如果有一条新通知和一条旧通知具有一个相同的标记，并且还没有被显示，那么这条新通知将会替换旧通知。如果旧通知已经显示出来了，那么旧通知将会被关闭，新通知将会被显示出来。
实例方法
notification实例有一个实例方法 —— close() ，调用这个方法可以关闭对应的notification
事件处理
notification实例有四个可以设置的触发事件： show （提醒显示时）, click （提醒被点击时）,error （提醒出错时）, close （提醒关闭时），通过设置 on+事件名 的属性来设置触发事件
requestPermission方法
var notification = new Notification("嗨(⊙▽⊙)", {
body: "这里是一个提醒的正文哦⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
icon: '/images/head.jpg'
});
notification.onshow = function(){
console.log("notification已被打开");
}
notification.onclick = function(){
this.close();
console.log("notification已被点击");
}
notification.onclose = function(){
console.log("notification已被关闭");
}
notification.onerror = function(){
console.log("notification出错");
}
来源：KainStar
页:
[1]