背景
正在研究 Websocket,先搞一搞 HTML5 特征 Web Notification API 来简单实现浏览器在线的消息推送
已加入 Pokers (https://pokers.zeo.im)
代码
notify_push(classid, thread, title, content) {
this.push.classid = classid;
this.push.thread = thread;
if (parseInt(this.opened_mes_info.thread_id) !== parseInt(this.push.thread)) {
if (Notification.permission !== 'granted') {
Notification.requestPermission().then(function (per) {
if (per == 'granted') {
var noti = new Notification(title, {
body: content,
icon: '../statics/img/pokers_logo.png'
});
noti.onclick = function () {
axios.get('../interact/select_classes.php?type=super&form=single&id=' + antd.push.classid)
.then(res => {
antd.open_class(antd.push.classid, 0, 1);
antd.opened_class_info.superid = res.data.super;
axios.get('../interact/select_thread.php?type=1&class_id=' + antd.push.thread)
.then(res => {
antd.open_mes(0, antd.push.thread, antd.push.classid, 1);
antd.opened_mes_info.thread_info = res.data[0];
})
})
};
}
});
} else {
var noti = new Notification(title, {
body: content,
icon: '../statics/img/pokers_logo.png'
});
noti.onclick = function () {
axios.get('../interact/select_classes.php?type=super&form=single&id=' + antd.push.classid)
.then(res => {
antd.open_class(antd.push.classid, 0, 1);
antd.opened_class_info.superid = res.data.super;
axios.get('../interact/select_thread.php?type=1&class_id=' + antd.push.thread)
.then(res => {
antd.open_mes(0, antd.push.thread, antd.push.classid, 1);
antd.opened_mes_info.thread_info = res.data[0];
})
})
};
}
}
},
↑ Vue.js 代码
批注
主要用到以下 API:
向浏览器要求通知权限并设置回调函数:
Notification.requestPermission().then(function(permission) { ... });
新建推送通知:
new Notification(title, options);
/*
dir 默认值是auto, 可以是ltr或rtl,有点类似direction属性。表示提示主体内容的水平书写顺序。
lang 提示的语言。
body 提示主体内容。字符串。会在标题的下面显示。
tag 字符串。标记当前通知的标签。
icon 字符串。通知面板左侧那个图标地址。
data 任意类型和通知相关联的数据。
vibrate 通知显示时候,设备震动硬件需要的振动模式。
renotify 布尔值。新通知出现的时候是否替换之前的。如果设为true,则表示替换,表示当前标记的通知只会出现一个
silent 布尔值。通知出现的时候,是否要有声音。默认false, 表示无声。
sound 字符串。音频地址。表示通知出现要播放的声音资源。
noscreen 布尔值。是否不再屏幕上显示通知信息。默认false, 表示要在屏幕上显示通知内容。
sticky 布尔值。是否通知具有粘性,这样用户不太容易清除通知。默认false, 表示没有粘性。
*/
通知关闭后回调函数:
Notification.close()
通知点击时的回调函数:
Notification.onclick()