Web Notifications 学习

网页通知API。
这是2011年由谷歌技术员John Gregg提出的一项网页通知api。

定义

请读者直接参考whatwg工作组对这个api的定义

Notifications API

API设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
[Constructor(DOMString title, optional NotificationOptions options),
Exposed=(Window,Worker)]
interface Notification : EventTarget {
static readonly attribute NotificationPermission permission;
[Exposed=Window] static void requestPermission(optional NotificationPermissionCallback callback);

attribute EventHandler onclick;
attribute EventHandler onshow;
attribute EventHandler onerror;
attribute EventHandler onclose;

readonly attribute DOMString title;
readonly attribute NotificationDirection dir;
readonly attribute DOMString lang;
readonly attribute DOMString body;
readonly attribute DOMString tag;
readonly attribute USVString icon;
readonly attribute USVString sound;
// 目前还没有暴露振动属性;见 bug 23682
readonly attribute boolean renotify;
readonly attribute boolean silent;
readonly attribute boolean noscreen;
readonly attribute boolean sticky;
[SameObject] readonly attribute any data;

void close();
};

dictionary NotificationOptions {
NotificationDirection dir = "auto";
DOMString lang = "";
DOMString body = "";
DOMString tag = "";
USVString icon;
USVString sound;
VibratePattern vibrate;
boolean renotify = false;
boolean silent = false;
boolean noscreen = false;
boolean sticky = false;
any data = null;
};

enum NotificationPermission {
"default",
"denied",
"granted"
};

callback NotificationPermissionCallback = void (NotificationPermission permission);

enum NotificationDirection {
"auto",
"ltr",
"rtl"
};

从api设计可知,该api的构造器接受两个参数,即通知标题通知参数,该对象可在window和worker上被使用

通知标题

通知标题即是指用户可见的通知内容,由容器显示在通知窗口上

通知参数

  • dir
    • 通知的方向,其可用类型为: 默认自动确认, 从左及右, 从右及左。在chrome最新浏览器上亲测无用。。
  • lang
    • 标记通知的标题,和身体的语言类型,默认为空字符串,若需要填写,应填写一个有效的 BCP 47 语言标记。据猜测是为浏览器翻译服务。
  • body
    • 通知内容,显示在通知标题之下,默认为空字符串
  • tag
    • 标记通知的类型,打上标签,默认为空字符串。使用该tag的场景是: 1.多实例通知并发操作的时候,当两个通知同时出现时,同一tag只出现一次。2.单实例时,两个定义了相同的tag的通知实体,会显示最新那个。
  • icon
    • 指定通知图标,接受一个URI资源标识符字符串,不填或解析错误时,默认未定义
  • sound
    • 指定通知声效,同上。在最新的Notifications技术评审稿中,该参数被舍弃
  • vibrate
    • 指定通知是否震动,该参数接洽了新的vibrate api, 通过valid pattern驱动,具体请点击链接查看示例。在最新的Notifications技术评审稿中,该参数被舍弃
  • renotify
    • 当一个通知列表中通知被替换时,指定该通知是否再次显示。值为true||false。在最新的Notifications技术评审稿中,该参数被舍弃
  • silent
    • 该标志表示不接收声音或者振动通知,值为true||false。在最新的Notifications技术评审稿中,该参数被舍弃
  • noscreen
    • 设置该标志表示设备屏幕不会被启用,值为true||false。在最新的Notifications技术评审稿中,该参数被舍弃
  • sticky
    • 设置该标志表示最终用户将不能很容易地清除 notification。设置该标志,通知将为永久型通知。在最新的Notifications技术评审稿中,该参数被舍弃
  • data
    • 扩展数据,在最新的Notifications技术评审稿中,该参数被舍弃

可设置的事件回调

1
2
3
4
5
6
7
8
9
var not = new Notification("Gebrünn Gebrünn by Paul Kalkbrenner");
// 当点击通知时
not.onclick = function () { alert('clicked') }
// 当通知出现时
not.onshow = function () { alert('show') }
// 当通知关闭时
not.onclose = function () { alert('closed') }
// 当通知发生错误时
not.onerror = function (e) { console.log(e.message) }

静态属性

Notification.permission:获取用户当前对通知的设置,包括default,denied, granted三个枚举值。default相当于禁止显示,表示用户没有设置通知许可,denied表示用户设置过不希望接受通知,同时通知是无法显示的,granted可以显示通知

静态方法

Notification.requestPermission(ptional NotificationPermissionCallback callback)该方法接受一个回调,回调带一个参数status。注意,在最新的技术评审稿中,调用该方法是异步的,会返回一个promise对象,我们完全可以点个then去处理status。

在评审稿中,它首先会设置permission = status,如果status === ‘default’,浏览器会弹出一个小窗,询问用户对该域进行通知设置。然后异步处理我们的callback。例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function notifyMessage(message, options, callback) {
if (Notification && Notification.permission === 'granted') {
var notification = new Notification(message, options);
callback(null, notification);
} else if (Notification.requestPermission) {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
if (status === 'granted') {
var notification = new Notification(message, options);
callback(null, notification);
} else {
callback(new Error('user denied'));
}
});
} else {
callback(new Error('doesn\'t support Notification API'));
}
}

function notifyMessage(message, options, callback) {
if (Notification && Notification.permission === 'granted') {
var notification = new Notification(message, options);
callback(null, notification);
} else if (Notification.requestPermission) {
Notification
.requestPermission()
.then(function (status) {
new Notification(message, options);
callback(null, notification);
})
.catch(function (status) {
callback(new Error('user denied'));
});
} else {
callback(new Error('doesn\'t support Notification API'));
}
}

实例方法

notification.close();直接关闭通知。

“我,鸡哥,打钱!”