如何使用 HTML5 的 Notification API

彭博 发布于 2012/10/28 11:04
阅读 12K+
收藏 56

HTML5 已经不是什么新玩意儿,每个人都多少听说过一些HTML5的特性。大多数人认为HTML5无非就是一些像是header, footer, nav, article, section等一样新的语义标签而已,但是很多人不知道它有很多我们可以使用的很棒的特性,例如:

  • 地理定位 API
  • HTML5 Details Tag
  • HTML5 表单特性
  • HTML5 表单验证
  • HTML5 Placeholder

本文将向你介绍HTML5带来的新特性:Notification API

该特性最有名的运用便是在你收到一封 Gmail 时的提醒,如果你当前打开了一个 Gmail 的页面,你会在屏幕右下角收到一个带标题和简短信息的弹出框。接下来我们将看看怎么才能利用该 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);
    	}
 }


演示(请使用Chrome 19+ 及 Safari 6+ 浏览)

点击查看演示 (Chrome 22.0.1229.94 m 似乎不支持 createHTMLNotification 方法)

加载中
0
wellyao
wellyao
ff都还不支持 很失望
0
xeonwell
xeonwell
上面提的chrome, safari都是webkit的, 与ff是两码事。

且这个特性主要还是适用移动设备
0
Xiaopeng
Xiaopeng
Demo里的Display HTML似乎not working,另外,Notification可以在打开网页的时候自动弹出吗?
彭博
彭博
需要用户授权才能打开哦,不然就能弹广告了,,,,
0
-卒-
-卒-

引用来自“Xiaopeng”的答案

Demo里的Display HTML似乎not working,另外,Notification可以在打开网页的时候自动弹出吗?
要么全英文,要么中文。掺杂着写看着心里难受
彭博
彭博
嘿嘿,个人习惯问题
Xiaopeng
Xiaopeng
这个???~~~
0
Xiaopeng
Xiaopeng
BTW,我用同样的浏览器(Chrome版 本 22.0.1229.94 m),通过OSCHINA可以运行你的DEMO,可是本地运行的时候就Fail了,只有那个“ Grant Permission To Display Notifications ”和“ Your browser does support the Notification API. ”,WHY???
Xiaopeng
Xiaopeng
回复 @彭博 : 是的,似乎只能通过服务器端浏览才可以,可以分析下吗?
彭博
彭博
本地?你指你把代码下载下来运行么?
0
Photon
Photon
新浪微博跟人聊天就有这个提示
彭博
彭博
是滴
0
hantsy
hantsy
God。。。垃圾广告的摇篮。
0
陈洋48671155
学习了,感谢
0
metian
metian
不能同时显示多个通知?
返回顶部
顶部