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

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

前言

说明

代码

将下面代码加入主题的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来体验一下哦

注意事项

后语

像云落之前说过的，牛叉的不是桌面推送，而是离线推送，只要你打开浏览器，那么不管你是否打开我们的网站，都可以直接给用户推送信息，这个在国内是比较尴尬的，一般都是国外网站在用的，另外主要是参考下文↓

https://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

-- 完 --