开篇注意事项:1.目前该特性仅支持版本比较新的火狐或者谷歌浏览器
用法:
消息推送-主要通过window.Notification.permission来判断
"denied" --- 为用户点击了禁用(拒绝打开推送功能)
"default" ----推送功能默认关闭
"granted" ----推送功能为开启状态(用户点击允许后的状态)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <a onclick="showNotification();">点我</a> <script> function showNotification() { if (!window.Notification) { alert("浏览器不支持通知!"); }; //permission只读属性: // default 用户没有接收或拒绝授权 不能显示通知 // granted 用户接受授权 允许显示通知 // denied 用户拒绝授权 不允许显示通知 var permission = window.Notification.permission; console.log('permission: ' + permission); if (permission!="granted") { Notification.requestPermission(function (status) { //status是授权状态,如果用户允许显示桌面通知,则status为'granted' console.log('status: ' + status); }); } var notification = new Notification("您有一条消息!",{ "icon": "https://avatar.csdnimg.cn/2/8/6/1_weixin_39475476.jpg", "body": "嘿,我在这儿~", }); notification.onshow = function () { console.log("显示通知"); setTimeout(()=>{ notification.close() }, 2000); }; notification.onclick = function () { console.log("打开相关视图"); window.open("https://blog.csdn.net/weixin_39475476/article/details/88866316"); notification.close();
}; notification.onclose = function () { console.log("通知关闭"); }; notification.onerror = function () { console.log('异常'); //do something useful }; }; </script> </body> </html>