如何使用 HTML5 的 Notification API

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('你的浏览器不支持此特性，请下载谷歌浏览器试用该功能')

}

这个需要自己手写来模拟

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

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

虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。

既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。

添加图标到主屏幕是Web App的第一步：

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">

添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed，区别就在于是否会应用iOS中自动给图标添加的那层高光。

由于iPhone以及iPad都有两种分辨率的设备存在，图标的尺寸就需要做4个：144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。

可以使用sizes尺寸来告诉设备该调用哪个图标。

---