今天发现 hacpai 在收到消息提醒时,右下角会弹出一个长方形的消息框,这个在 Chrome 插件拓展 见过很多次,觉得很有趣,便查了下 API ,折腾出了下面的代码:
JavaScript:
function notifyMe() {
// 检查浏览器是否支持 Notification
if (!("Notification" in window)) {
alert("你的不支持 Notification! TAT");
}
// 检查用户是否已经允许使用通知
else if (Notification.permission === "granted") {
// 创建 Notification
var notification = new Notification("Hey guy!");
notification.iconurl = 'http://b3logfile.com/avatar/1450241301546-260.jpg?1451971807339';
autoClose(notification);
}
// 重新发起请求,让用户同意使用通知
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// 用户同意使用通知
if (!('permission' in Notification)) {
Notification.permission = permission;
}
if (permission === "granted") {
// 创建 Notification
var notification = new Notification("Hey guy!");
}
});
}
// 注意:如果浏览器禁止弹出任何通知,将无法使用
}
function autoClose(notification) {
if (typeof notification.time === 'undefined' || notification.time <= 0) {
notification.close();
} else {
setTimeout(function () {
notification.close();
}, notification.time);
}
notification.addEventListener('click', function () {
notification.close();
}, false)
}
HTML:
<button onclick="notifyMe()">Notify me!</button>
欢迎大家来我博客耍~ http://buhuibaidu.me
☺️
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于