HTML5 Notification桌面通知

这个需要自己手写来模拟

旧版的Notification（Chrome20几）支持内嵌html以及一些复杂的类型

新版的API已经去掉了，要想实现，可以自己模拟一个

1、桌面通知。桌面通知是出现在浏览器之外的小d窗，即使在用户没有浏览网站时，也可以和网站进行互动，但是必须登录账户才能使用。

2、地理定位。人们越来越少通过台式机甚至笔记本电脑来使用网络了。在今天，有很多人通过手持可移动设备浏览网络，例如智能手机和平板电脑。目前这种移动化的网络访问特征，再加上HTML5中新的地理定位功能，结合在一起开创了无数新的可能性，必须登录账户。

3、新的图形库。HTML5引入了Canvas和WebGL函数库，可以让网站内容变得更加丰富，前提是登录账号才能实现。

1、webkitNotification

document.getElementById('notifyButton').onclick = function(){

//判断浏览器是否支持notification

if(window.webkitNotifications){

//判断当前页面是否被允许发出通知

if(webkitNotifications.checkPermission==0){

var icon_url = 'http://www.w3.org/'

var title = 'Hello HTML5'

var body = 'I will be always here waiting for you!'

var WebkitNotification = webkitNotifications.createNotification(icon_url, title, body)

WebkitNotification.show()

}else{

document.getElementById('requestbutton').onclick = function () {

webkitNotifications.requestPermission()

}

}

}else alert("您的浏览器不支持桌面通知特性，请下载谷歌浏览器试用该功能")

}

2 、Notification

document.getElementById('notifyButton').onclick = function () {

if (window.Notification){

if(Notification.Permission==='granted'){

var notification = new Notification('Hello Notification',{body:"I hope that all the browser will support this\                   function!"})

}else {

document.getElementById('requestButton').onclick = function (){

Notification.requestPermission()

}

}

}else alert('你的浏览器不支持此特性，请下载谷歌浏览器试用该功能')

}

---