html5 Notification 用法

 

Chrome浏览器支持桌面提示，像GMAIL和WEBQQ所用的那样子，它可以跨越浏览器沙盒，通过调用浏览器提供的API来实现，也就是说，即使浏览器最小化了，或者你正在别的桌面下（Linux下），同样也可以收到提示。目前有关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() 之前设定才有效。