HTML5 Notification API

与 WebkitNotification 的区别

过去,我们使用 window.webkitNotification 创建通知,但正如它的名字一样,这是个 Webkit 的专属接口,是在 HTML5 Notification 出来前的临时解决方案,在最新版 Chrome 中已经停用。

如何使用 HTML5 Notification API

根据 W3C 标准,创建一个 Notification 的正确方式是新建一个 Notification 对象,然后可以绑定这个对象的事件。不过在这之前,你需要用 Notification.requestPermission(callback) 方法请求创建通知的权限。

Notification 对象

创建一个 Notification 对象十分简单,只需要运行如下 JavaScript

var notification = new Notification(title, options)

其中 title 为通知的标题,options (可选) 为通知的参数,是一个 JavaScript 对象,对象可以包含如下属性:

dir: 显示顺序;可以使用 auto (自动)、ltr (从左到右)、trl (从右到左)
lang: 通知的语言;参见:RFC 5646: BCP 47 语言标识
body: 通知的正文
tag: 有点类似于 ID 的标识符
icon: 通知的图标

Notification 对象还有如下的静态属性:

Notification.permission
(只读) 用来查看当前网站是否有发送通知的权限

静态方法:

Notification.requestPermission
用于请求发送通知的权限,可以使用一个回调函数作为参数。在用户点击允许/拒绝时会触发回调函数

当你新建了 Notification 对象后,可以使用以下实例方法:

notificationObject.close()
关闭这条通知

notificationObject.addEventListener()
绑定事件监听器,这个不多说

notificationObject.removeEventListener()
跟上一个相反

Notification 对象后具有如下的事件:

notificationObject.onclick
当用户点击通知条时触发

notificationObject.onshow
当通知条显示后触发

notificationObject.onerror
当通知出现错误时触发(这个真没用过)

notificationObject.onclose
通知被关闭时触发

标签: HTML5


添加新评论