参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571
Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持
下面是一个简单的示例(注意测试的时候需要把页面发布到浏览器上才会有效果):
<div class="row"> <div class="col-md-12"> <button id="showNoti">显示通知</button> </div> </div> <script> $(function () { $("#showNoti").click(function () { if (!window.Notification) { alert("浏览器不支持通知!"); } console.log(window.Notification.permission);
if (window.Notification.permission != 'granted') { Notification.requestPermission(function (status) { //status是授权状态,如果用户允许显示桌面通知,则status为'granted' console.log('status: ' + status); //permission只读属性: // default 用户没有接收或拒绝授权 不能显示通知 // granted 用户接受授权 允许显示通知 // denied 用户拒绝授权 不允许显示通知 var permission = Notification.permission; console.log('permission: ' + permission); }); }
var n = new Notification("您有一条消息!", { "icon": "", "body": "您一分钟后将有好运气" }); n.onshow = function () { console.log("显示通知"); setTimeout(function () { n.close() }, 2000); }; n.onclick = function () { alert("打开相关视图"); window.open("/Home/about"); n.close(); }; n.onclose = function () { console.log("通知关闭"); }; n.onerror = function () { console.log('产生错误'); //do something useful }; }); }); </script>
相关函数:
Notification.requestPermission(callback);--用于取得用户同意
Notification.permission --用户是否同意显示通知,相关取值:
“granted”(状态值:0)表示用户同意消息提醒;“default”(状态值:1)表示默认状态,用户既未拒绝,也未同意;“denied”(状态值:1)表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒
new Notification(title, options)
通过new构造,显示通知。
其中title是必须参数,options是可选参数,下面是一些参数的简单说明
lang:提示的语言
bady:提示消息的主体内容。
tag:标记当前通知的标签
icon:就是提示的时候显示的图标
renotify:是否替换之前的通知项