html5 Notification 用法

wangnan0 2012-10-22

Chrome浏览器支持桌面提示,像GMAIL和WEBQQ所用的那样子,它可以跨越浏览器沙盒,通过调用浏览器提供的API来实现,也就是说,即使浏览器最小化了,或者你正在别的桌面下(Linux下),同样也可以收到提示。目前有关Notification的标准还处在草案阶段。

html5 Notification 用法

Linux下Chrome15浏览器发出的Notification显示效果

如上图所示效果,感觉Notification目前还很简单,样式无法自定义,会随浏览器或操作系统平台的不同而不同。

Chrome对Notification的实现,与W3C标准有些不同,貌似是Chrome先起草的,后又被纳入W3C标准中。

Chrome的Notification介绍,以及Chrome的webkitNotification的API文档. 另外,这里是W3C标准

有关向用户使用授权

这个功能的开启要向用户请求授权,而且这个动作必须是由用户发起的,比如用户点击链接或按钮什么的,不能由JavaScript直接向用户发起请求。另外,由于Chrome的实现跟W3C的标准有些不同,其请求授权后返回的错误码也是不同的:

Chrome的定义如下:

  • PERMISSION_ALLOWED (0) indicates that the user has granted permission to scripts with this origin to show notifications.
  • PERMISSION_NOT_ALLOWED (1) indicates that the user has not taken an action regarding notifications for scripts from this origin.
  • PERMISSION_DENIED (2) indicates that the user has explicitly blocked scripts with this origin from showing notifications.
可是我实际测试中,发现只会返回2(不允许)和0(允许)两种情况, 所以我一般使用if(window.webkitNotifications.checkPermission() == 0) 来确定拥有权限。

W3C的标准如下:

  • USER_ALLOWED (2)Indicates that the user has not made a permissions decision, but the user agent’s default policy is to allow permission.
  • DEFAULT_ALLOWED(1)Indicates that the user has not made a permissions decision, but the user agent’s default policy is to deny permission.
  • DEFAULT_DENIED(-1)Indicates that the user has granted permission.
  • USER_DENIED(-2)Indicates that the user has denied permission.

事件名称的不同

W3C标准中,定义Notification显示后要触发的事件是(on)show, 而Chrome中却是(on)display, 其它没有什么不同。

一般使用步骤

使用Notification,一般需要以下几个步骤:

  1. 请求授权:这一步必须要由用户的动作发起,比如用户的点击动作等。Chrome浏览器的代码是:
    window.webkitNotifications.requestPermission(callback);
    可以传入一个回调函数,但这个函数不会有任何参数传入。
  2. 检查授权:在创建Notification对象之前最好检查一下是否得到授权,若没有会抛异常。Chrome的代码是:
    window.webkitNotifications.checkPermission();
    有关返回的代码参建上面讲的。
  3. 创建对象:目前有两种Notification对象,一是模板型的,可以指定iconUrl(图标URL),title(标题) 以及body(内容),另外一种是网页型的,传入一个URL加载这个页面,发现这一种方式不会响应加载的页面中的alert事件,而且由于是跨沙盒的,因此window.opener为空,引用不到父窗口。而且,弹出的Notification好像也无法指定大小(反正我没找到方法)。
  4. 绑定事件:共有下面几种事件可以供监听:onshow(ondisplay), onerror, onclose, onclick.
  5. 显示提示:调用show()方法,很简单。
  6. 关闭提示:调用cancel()方法。
另外,Notification对象有一个属性是replaceId, 如名称一样,它是用来替换一个已经显示的Notification的,只要两个Notification的replaceId相同,则第二个就会替换第一个的显示。注: 这个属性必须要在show() 之前设定才有效。

相关推荐