给 Pokers 加上 HTML5 Web Notification
2023-06-13 09:15:15 时间
背景
正在研究 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()
相关文章
- HTML5 Canvas的简单使用
- HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」
- HTML5_ScrollInToView方法「建议收藏」
- 无插件纯Web 3D机房,HTML5+WebGL倾力打造
- css适配不同分辨率屏幕_html5判断分辨率
- HTML5+CSS3海绵宝宝网站设计(2)
- web基础知识_Web开发基础
- HTML5代码测试终端与服务器之间的网络速度和状态
- HTML5中的DOM扩展(三)插入标记
- HTML5之SVG详解编程语言
- HTML5 Canvas arc()函数详解编程语言
- 给你的Web服务加上Linux强化保障(web服务linux)
- 器重启Web服务器:Linux下的快速操作(linux重启web服务)
- 应用突破性的Redis应用:开创Web应用的新世界(redis应用web)
- 利用HTML5的CORS特性绕过httpOnly的限制实现XSS会话劫持
- HTML5 新元素
- HTML5 语义元素
- HTML5 Web 存储
- HTML5 <mark> 标签
- Web查找Redis明智之行(web如何查找redis)
- Web前端快速构建Redis连接(web前端连接redis)
- 使用webpy和redis构建高性能Web应用(web.py redis)