HTML5中的Web Notification桌面通知(右下角提示)

html5桌面通知(Web Notifications)对于需要实现在新消息入线时，有桌面通知效果的情况下非常有用，在此简单介绍一下这个html5的新属性。通过Web Notifications（桌面通知系统），网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title></head><body><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script><a onclick="showNotification();">点我看右下角信息</a><script>function showNotification() {window.Notification.permission = "granted";alert(window.Notification.permission);if(window.Notification) {if(window.Notification.permission == "granted") {var notification = new Notification('你有一条新信息', {body: "你好我是王小婷",icon: "img/1.jpg"});setTimeout(function() { notification.close(); }, 5000);} else {window.Notification.requestPermission();}} else alert('你的浏览器不支持此消息提示功能，请使用chrome内核的浏览器！');};</script></body>
</html>

实现效果：

图片.png

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

转载于:https://www.cnblogs.com/wangting888/p/9701547.html

HTML5中的Web Notification桌面通知(右下角提示)相关推荐

【HTML】HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.这里简单的介绍一下如何实现这样的功能. 1.实现标签 ...
简易实用的Web Notification桌面通知
Web Notification桌面通知项目需要,要利用google的notification实现新消息桌面提醒功能,之前研究了一下H5的Web Notification发现很简单,项目上线好久忘截 ...
H5的Notification特性 - Web的桌面通知功能
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/49 H5的Notification特性 - Web的桌 ...
[html] html5的Notification桌面通知如何请求权限？
[html] html5的Notification桌面通知如何请求权限? Notification.requestPermission(callback); 个人简介我是歌谣,欢迎和大家一起交流前后 ...
H5 Web Notification桌面推送消息
H5 Web Notification桌面推送消息由于这两天公司项目刚好做到一个需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到HTML5 Web Notificati ...
Notification桌面通知最佳实践
Notification通知最佳实践安全上下文: 此项功能仅在安全上下文(HTTPS), 一些支持的浏览器. Notifications API 的通知接口用于向用户配置和显示桌面通知. 在线示例 ...
Notification桌面通知
Notification通知最佳实践安全上下文: 此项功能仅在安全上下文(HTTPS), 一些支持的浏览器. Notifications API 的通知接口用于向用户配置和显示桌面通知. 在线示例 ...
js 浏览器桌面通知notification
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...

HTML5中的Web Notification桌面通知(右下角提示)

HTML5中的Web Notification桌面通知(右下角提示)相关推荐

最新文章

热门文章