背景

正在研究 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()