HTML5特性——Notification

w8484855@qq.com

本文和大家分享的主要是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([callback]) —— 向用户请求允许使用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