浏览器桌面通知Notification API学习

mokevip
289 阅读4分钟
相信经常使用谷歌产品的都经常会受到来自浏览器的通知，如邮件或者关注的youtube更新等。

桌面通知功能能够让浏览器即使是最小化的状态，也能将消息通知给用户。

这种通知，用户可以自己选择是否接受该网站的通知，并且整体UI风格统一，个人认为非常适合资讯类和视频类网站。

不得不说，浏览器的生态越来越完美了，这对前端来说是非常有利的。电脑端较为常用的浏览器几乎都支持了， 比较可惜的是手机端几乎没有支持这个特性的。

下面我们开始吧！

判断权限

调用之前判断自己有没有权限，注意要对不支持的浏览器做好兼容性处理。

//对没有提供接口的浏览器处理
try{
    if(Notification.permission === 'granted'){
        //已授权
    }else if(Notification.permission === 'denied'){
        //拒绝
    }else{
        //未询问
    }
}
catch(e){
    //该浏览器不支持
}

请求权限

咱不是流氓软件，凡是会打扰到用户的，都得用户同意才行是不是。
别担心，相同的域名只需要获取一次权限就可以一直使用。

//获取通知权限的方法,结果通过promise返回
//返回值：granted同意；denied拒绝
Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
    init();
});

发送通知

如果用户授权允许，我们就可以调用通知的方法了。

记得，如果设置requireInteraction为true要记得关闭哈！

var n = new Notification('通知来啦',{
    body: '这是一个通知',       //通知的文字内容
    tag: 'a',                  //通知的分类，同一tag的内容同一时间只会显示一个窗口
    icon: 'iconUrl',           //通知的图标
    requireInteraction: true   //通知保持有效不自动关闭，默认为false
})
setTimeout(function() {        //设置了requireInteraction需要自己配置关闭通知
    n.close();
}, 10000);

把上面的连起来，就是一个简单的示例了：

var n = new Notification('通知来啦',{
    body: '看，你已经可以接受通知啦，点击可以进入我的博客哟！',
    tag: 'a',
    icon: 'http://secure.gravatar.com/avatar/14c889100dc44646b7da2344e2a2a375?s=32&d=mm&r=g',
    requireInteraction: true
})
setTimeout(function() {
    n.close();
}, 10000);

效果如下：


点击跳转url的实现

细心的小伙伴们可能发现了，我在通知中写了点击可以进入我的博客哟。

别急，我们这就来实现！

//如果用户点击通知，为他跳转网页并关闭通知窗口
n.onclick = function(){
    window.open("http://blog.mokevip.top", '_blank');      // 新窗口打开网址
    n.close();                                             // 并且关闭通知
}

总结

大致流程如下：


示例：www.mokevip.top/message.htm…

官方文档：developer.mozilla.org/zh-CN/docs/…

demo代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>js浏览器通知示例</title>
</head>

<body>
<h1 id="msg">您将会收到一条通知</h1>
<script>
init();
	
//获取用户通知权限
function getPower(){
    //获取通知权限的方法,结果通过promise返回
    Notification.requestPermission().then(function(permission) {
        if(permission === 'granted'){
            console.log('用户允许通知');
        }else if(permission === 'denied'){
	    console.log('用户拒绝通知');
        }
        init();
    });
}
	
//初始化，判断用户权限
function init(){
    //对没有提供接口的浏览器处理
    try{
        if(Notification.permission === 'granted'){
	    document.getElementById("msg").innerHTML="您将会收到一条通知"
				    
	    //通过创建实例完成通知，保存实例可以进行下一步操作
	    var n = new Notification('通知来啦',{
	        body: '看，你已经可以接受通知啦，点击可以进入我的博客哟！', //通知的文字内容
	        tag: 'a', //通知的分类，同一tag的内容同一时间只会显示一个窗口
	        icon: 'http://secure.gravatar.com/avatar/14c889100dc44646b7da2344e2a2a375?s=32&d=mm&r=g', //通知的图标
	        requireInteraction: true //通知保持有效不自动关闭，默认为false
	    })
					
	    //10秒后关闭通知
	    setTimeout(function() {
	    n.close();
	    }, 10000);
					
	    //如果用户点击通知，为他跳转网页并关闭通知窗口
	    n.onclick = function(){
	        window.open("http://blog.mokevip.top", '_blank');      // 打开网址
	        n.close();                              // 并且关闭通知
	    }
	}else if(Notification.permission === 'denied'){
	    document.getElementById("msg").innerHTML="您已拒绝通知权限"
	}else{
	    document.getElementById("msg").innerHTML="同意权限你就可以接收到通知啦！"
	    getPower()
	}
    }
    catch(e){
	document.getElementById("msg").innerHTML="该浏览器不支持通知信息"
    }
}
</script>
</body>
</html>

文章就到这里啦，如果你喜欢，欢迎留言支持！

我的博客地址为：blog.mokevip.top/ 会不定时更新一些轻技术内容，博客小白新手起步，希望大家支持哈。


avatar
文章
阅读
粉丝