0°

HTML5 Web Notification桌面通知

1635 个字符,4 张图片,大约需要 3 分钟阅读

云落大神 那里看到的一个通知,感觉挺好的,就去查了查

HTML5 Web Notification桌面通知

这个用的是html5中的新东西Web Notification

就是打开的时候,然后就会弹出一个是否显示通知的东西

HTML5 Web Notification桌面通知

然后,点击允许,就拥有了相关权限

就会显示相关通知

查了查相关→资料←,感兴趣的可以去看一下

值得注意的是,如果是chrome浏览器则需要https协议才能正常显示

emmm。。。

下面这是一大佬做的相关demo

https://zhangxinxu.github.io/https-demo/notification/basic.html

写得已经很简洁明了了

下面是从云落大佬那扒来的通知代码

贼好用

<script type = "text/javascript" >
if (window.Notification) {
	function setCookie(name, value) {
		var exp = new Date();
		exp.setTime(exp.getTime() + 10 * 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("Hi,你好", {
					body: "欢迎订阅我们乐趣公园,可以直接在公众号里面接收到主题的使用问题以及可以直接在公众号里面搜索使用文档,以后主题的使用文档基本会在公众号里面更新,最好都关注下。",
					icon: "https://googlo.b0.upaiyun.com/wp-content/uploads/de6ff9981daa_avatar-64x64.png"
				});
				n.onclick = function() {
					window.location.href = "https://googlo.me/template/adwxapp.html";
					n.close()
				};
				n.onclose = function() {
					setCookie("git_Notification", "23398221")
				}
			}
		};
	if (getCookie("git_Notification") == "23398221") {
		console.log("您已关闭桌面弹窗提醒,有效期为10天!")
	} else {
		if (Notification.permission == "granted") {
			popNotice()
		} else if (Notification.permission != "denied") {
			Notification.requestPermission(function(permission) {
				popNotice()
			})
		}
	}
} else {
	console.log("您的浏览器不支持Web Notification")
} 
</script>

简单修改下,一个通知就新鲜出路啦

HTML5 Web Notification桌面通知
HTML5 Web Notification桌面通知

除非注明,否则均为喵喵喵博客原创文章,转载请以链接形式标明本文地址

本文链接:https://www.miaomiaomiao.org/9930.html

0 条回复 A 作者 M 管理员
    当上帝赐给你荒野时,就意味着,他要你成为高飞的鹰
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论