用原生js给网站实现一个HTML5桌面通知功能

文章目录[隐藏]

前言
说明
代码
演示
注意事项
后语

HTML5 给我们带来很多的特性，有时候不经意中发现特别有趣，耳桌面通知功能就是一个非常有意思的功能，今天我们将这个功能加入到我们的网站中。

前言

经常来云落网站的肯定很熟悉云落网站右下角不是会有小弹窗出来吧，不考虑他是否烦人这一点，这个确实是一个非常不错的通知方式，因为使用的是 HTML5 自带的通知功能，原生 js 即可搞定，不加载任何资源，做个功能云落已经集成到了 Git 主题里面了，如果对这款主题熟悉的就知道这个功能的，本篇文章就讲一下如何将这个功能植入自己的网站，而不仅仅是 WordPress。

说明

HTML5 Web Notification 通知是属于桌面性质的通知，有点类似于显示器右下角蹦出的 QQ 弹框，杀毒提示之类的，跟浏览器是脱离的，消息是置顶的。兼容性方面，IE 是跪下了，IE9 都不支持，火狐和 Chrome 都没问题，另外 Chrome 需要在https下面才可以，而在移动端方面几乎是全军覆没。就目前来说，桌面推送也就是在桌面使用的。另一方面桌面推送另一个牛叉的功能是在打开浏览器之后，不管是否有打开网站，都可以给用户电脑直接推送信息，因为国情原因，这个功能在国内是实现不了的，因为这个需要谷歌的 FCM 推送。

代码

将下面代码加入主题的 function 文件即可

//HTML5 桌面通知 by 云落
function Gitcafe_Notification_js(){
	$notify_title = 'Hi,这是一个桌面推送';//推送的标题
	$notify_days = 20;//推送的间隔时间，这里按照天计算
	$notify_body = '极客公园推出微信订阅功能...';//推送的正文
	$notify_icon = '';//这里是推送的图标，正方形，可以动图
	$notify_link = '';//点击推送的链接
	$notify_key = 'sdfs6546546';//验证是否点击的 cookie 值，随便填写
    ?>
    <script type="text/javascript">
    if (window.Notification) {
	function setCookie(name, value) {
		var exp = new Date();
		exp.setTime(exp.getTime() + <?php echo $notify_days;?> * 24 * 60 * 60 * 1000);
		document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
	}
	function getCookie(name) {
		var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
		if (arr != null) return unescape(arr[2]);
		return null
	}
	var popNotice = function() {
			if (Notification.permission == "granted") {
				var n = new Notification("<?php echo $notify_title;?>", {
					body: "<?php echo $notify_body;?>",
					icon: "<?php echo $notify_icon;?>"
				});
				n.onclick = function() {
					window.location.href="<?php echo $notify_link;?>";
					n.close()
				};
				n.onclose = function() {
					setCookie("git_Notification", "<?php echo $notify_key;?>")
				}
			}
		};
	if (getCookie("git_Notification") == "<?php echo $notify_key;?>") {
		console.log("您已关闭桌面弹窗提醒，有效期为<?php echo $notify_days;?>天！")
	} else {
		if (Notification.permission == "granted") {
			popNotice()
		} else if (Notification.permission != "denied") {
			Notification.requestPermission(function(permission) {
				popNotice()
			})
		}
	}
} else {
	console.log("您的浏览器不支持 Web Notification")
}
</script>
    <?php
	}
}
add_action('get_footer','Gitcafe_Notification_js');

事实上，看懂的就知道，其实就是一段 js 而已，你可以自己直接复制成 js 加入到自己网站里面。

演示

云落自己录了个图，应该能看懂的

点击关闭或者自动关闭之后会给浏览器添加 cookie 的，以及添加备注到控制栏下面

cookie 值也增加了

当然，你可以通过清除本站的 cookie 来体验一下哦

注意事项

前面说了，用户点击关闭或者自动关闭之后会等待固定时间后重新弹窗的，但是如果我现在有急事，需要弹窗公告的，难道也要等 10 或者 20 天之后再弹窗吗？不需要的，我们可以修改代码里面的那个 notify_key 这个值来让用户的 cookie 失效，以实现无视时间间隔重新推送，这里又有一个坑，就是如果你使用了静态缓存插件的话，还需要更新下缓存，不然会出现用户到每个页面都重新弹窗的尴尬。