• 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

  • 给网站增加一个离线缓存功能

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

WordPress 云落 4周前 (01-20) 299次浏览 4个评论
文章目录[隐藏]

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

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

前言

说明

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加入到自己网站里面。

演示

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

用原生js给网站实现一个HTML5桌面通知功能
点击关闭或者自动关闭之后会给浏览器添加cookie的,以及添加备注到控制栏下面
用原生js给网站实现一个HTML5桌面通知功能
cookie值也增加了
用原生js给网站实现一个HTML5桌面通知功能
  • 当然,你可以通过清除本站的cookie来体验一下哦

注意事项

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

后语

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

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


-- 完 --
用原生js给网站实现一个HTML5桌面通知功能
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:用原生js给网站实现一个HTML5桌面通知功能
喜欢 (3)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 朋友 交换链接吗
    老董博客2019-01-22 08:26 回复 Windows 8.1 | Chrome 63.0.3239.132
  2. Glados2019-01-21 13:37 回复 Windows 7 | Chrome 67.0.3396.87
  3. 亲,有错别字
    感恩2019-01-21 00:06 回复 Mac OS X | 微信浏览器 7.0.2
    • 云落
      不要在意这些细节。。。。。
      云落2019-01-21 00:08 回复 Windows 10 | Chrome 71.0.3578.98