如何使用 HTML5 的 Notification API

浏览器支持情况

当前只有 Chrome 19+ Safari 6+支持，点击查看当前 Notification API 支持情况

Notification API

在 Notification API 中会用到两个对象，第一个就是 notification 对象。

interface Notification : EventTarget {

// display methods

void show()

void cancel()

// event handler attributes

attribute Function ondisplay

attribute Function onerror

attribute Function onclose

attribute Function onclick

}

这就是notification需要使用到的接口，它有2个方法和相关的4个属性。

Notification 方法

用来显示和隐藏提示框的方法：

Show - 该方法用来显示一个提醒

Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。

Notification 属性

通知属性用作事件监听器，监听提醒中的不同事件：

ondisplay - 当 notification 被显示时调用

onerror - 当 notification 出现错误时调用

onclose - 当 notification 关闭时调用

onclick - 当提示框被点击时调用

第二个需要的就是 NotificationCenter 接口。

interface NotificationCenter {

// Notification factory methods.

Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception)

optional Notification createHTMLNotification(in DOMString url) throws(Exception)

// Permission values

const unsigned int PERMISSION_ALLOWED = 0

const unsigned int PERMISSION_NOT_ALLOWED = 1

const unsigned int PERMISSION_DENIED = 2

// Permission methods

int checkPermission()

void requestPermission(in Function callback)

}

interface Window {

...

attribute NotificationCenter webkitNotifications

...

}

Notification center 用来创建 notification 对象，并检查当前页面是否有显示该对象的权限。

使用 Notification center 时需要用到4个方法：

createNotification - 如果 notification 有权限被显示，呢么该方法将会创建一个 notification 对象，并为其填充相关的内容。如果页面没有允许 notification ，那么将抛出一个安全异常。

createHTMLNotification - 该方法类似于 createNotification ，若页面有权限显示 notification 它会返回一个相关的对象。该方法使用了一个 URL 参数来加载要显示的 HTML 内容。

checkPermission - 该方法返回该页面使用 notification 的整形权限值。PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, 或者 PERMISSION_DENIED = 2

requestPermission - 该方法将向用户请求询问显示提示框的权限。

检查浏览器是否支持 Notification

当你准备用 notification API 做点什么之前，你需要先检查浏览器是否支持，你可以使用一下代码来检查：

/**

* Check if the browser supports notifications

*

* @return true if browser does support notifications

*/

function browser_support_notification()

{

return window.webkitNotifications

}

获得显示权限

显示一个提醒之前你需要得到用户的允许，获得此权限你需要做的就是使用 requestPermission() 方法：

/**

* Request notification permissions

*/

function request_permission()

{

// 0 means we have permission to display notifications

if (window.webkitNotifications.checkPermission() == 0) {

window.webkitNotifications.createNotification()

} else {

window.webkitNotifications.requestPermission()

}

}

显示纯文本提示框

创建一个显示纯文本的提示框前你需要检查是否有权限显示。如果有权限我们就能使用createNotification()方法创建一个新的 notification 了，使用 createNotification() 传递图片、标题以及描述信息3参数即可。

/**

* Create a plain text notification box

*/

function plain_text_notification(image, title, content)

{

if (window.webkitNotifications.checkPermission() == 0) {

return window.webkitNotifications.createNotification(image, title, content)

}

}

显示 HTM L 提醒框

在显示之前我们也需要检查显示权限，如果有权限，我们可以使用createHTMLNotification(url) 方法创建，传递的 url 地址即我们要显示的页面。

/**

* Create a notification box with html inside

*/

function html_notification(url)

{

if (window.webkitNotifications.checkPermission() == 0) {

return window.webkitNotifications.createHTMLNotification(url)

}

}

api就是接口，html里面的api也不例外，也是些编程接口，是你访问一些编码指令和一些标准的一个接口一个集合，就跟插座一样，是电和电器的一个接口。比如html5里面的canvas，是绘图的一个api，html5获取地理位置的api，即时通信的api，文件读取api等等，通过这些api来访问标准里面的指令编码，来 *** 纵相应的 *** 作。

可以实现的，HTML5可以使用手机的GPS信息，利用百度等地图的开放API就可以了。

HTML5中可以通过IP，WIFI信息，GPS，来实现地理定位，当然相关精度也是有所不同，所以如果要精确导航就得使用GPS信息。

下面是一段HTML5结合百度地图API来获取位置的代码：

<div id="allmap"></div>当前定位地址：<a id="du-gps"></a><span></span></div>

<script>

var map = new BMap.Map("allmap")

var geolocation = new BMap.Geolocation()

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

map.panTo(r.point)

//alert('您的位置：'+r.point.lng+','+r.point.lat)

var pt = r.point

var geoc = new BMap.Geocoder()

geoc.getLocation(pt, function(rs){

var addComp = rs.addressComponents

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)

$("#du-gps").text(addComp.district+addComp.street+addComp.streetNumber)

})

}

else {

alert('failed'+this.getStatus())

}

},{enableHighAccuracy: true})

</script>

---