刚做了网页里调用系统通知的功能,这样即使浏览器不在最上面也能够收到提醒。通过浏览器的Notification实现,需要发送通知时调用showNotice(msg)方法即可。
function showNotice(msg) {
//发送通知
newNotify = function () {
var notification = new Notification("系统通知:", {
dir: "auto",
lang: "hi",
requireInteraction: true,
//tag: "testTag",
icon: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
body: msg
});
notification.onclick = function (event) {
//回到发送此通知的页面
window.focus();
//回来后要做什么
console.log("I'm back");
}
}
//权限判断
if (Notification.permission == "granted") {
newNotify();
} else {
//请求权限
Notification.requestPermission(function (perm) {
if (perm == "granted") {
newNotify();
}
})
}
}
通常在页面加载时请求通知的权限
if (Notification.permission == "default") {
Notification.requestPermission();
}
并不是所有浏览器都支持这个功能,下面是支持的浏览器列表(截图来源),分别是pc端和移动端,时间截止2018-12-05
需要注意的是,chrome只允许https的站点调用Notification,如果是http站点会默认拒绝,并且无法修改。
不过有个例外:http://localhost/ ,这个url被特批可调用。所以当我在本地测试完成美滋滋发到服务器却发现不能用时真是WTF