ht ML 5桌面通知(Web Notifications)对于需要实现在新消息入线时，有桌面通知效果的情况下非常有用，在此 简单 介绍一下这个html5的 新属性 。
这里有个不错的demo：html5 web notification demo
从上面这个demo中 我们就可以获取所需要的基本核心代码，如下：
复制代码
代码如下:<script>
VAR Notification = window.Notification || window.mozNotification || window. webkit Notification;
Notification.request PE rmission(function (permission) {
// console. LOG (permission);
});
function show() {
var instance = new Notification(
" test t IT le", {
body: " test message"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
};
instance.onclose = function () {
// Something to do
};
return false;
}
</script>
&nbs p;
其中： Notification.requestPermission 这句代码的功能就是向用户请求权限允许 。
通过以上的例子，基本思路我们已经有了，首先加载文档时，就向用户请求权限，获取权限后以后都so easy了。
复制代码
代码如下:window.addEventListener('load', function () {
// At First , let's check if we have permission for notification
if (Notification && Notification.permission ! == "granted") {
Notification.requestPermission(function ( stat us) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});
火狐下 验证是通过的，但是在ch rom e下总是出不来，后来发现这样一段话
复制代码
代码如下:Not a Bug, Feature.
Desktop Notifications can only be trigge red via a user action. Typing into the
JavaScript console has the s am e effect as raw javascript code embedded into the web
page (no user action). Typing the javascript into the location bar, however,
re PR esents a user-action (the user is intentionally visiting a javascript link to
enable notifications, probably for sites t hat tend to use hr ef="javascript：" instead
of onclick="".
I'm pretty sure this is a non -i ssue.
原来 在chrome下是必须要用户手动触发的，否则，chrome浏览器会无视这段的js
但是在我们网站里肯定不可能加一个按钮 或者 超链接来显式的让用户授权吧，好吧， 实际上这也不是个事情，我们可以在用户经常点的按钮上顺便处理下这个授权就好，在chrome下是一次授权终身有用。除非你进入设置把他禁了。
整合一下，代码如下：
复制代码
代码如下:function showMsgNotification(title, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
if (Notification && Notification.permission === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// If the user s ai d okay
if (status === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else {
return false
}
});
}else{
return false;
}
}
总结
以上是 为你收集整理的 html5桌面通知(Web Notifications)实例解析 全部内容，希望文章能够帮你解决 html5桌面通知(Web Notifications)实例解析 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5桌面通知(Web Notifications)实例解析的详细内容...