html5桌面通知(Web Notifications)实例解析


Posted in HTML / CSS onJuly 07, 2014

html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性。

这里有个不错的demo:html5 web notification demo

从上面这个demo中 我们就可以获取所需要的基本核心代码,如下:

复制代码
代码如下:
<script>
var Notification = window.Notification || window.mozNotification || window.webkitNotification;

Notification.requestPermission(function (permission) {
// console.log(permission);
});

function show() {
var instance = new Notification(
"test title", {
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>


 
其中: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 (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});

火狐下 验证是通过的,但是在chrome下总是出不来,后来发现这样一段话

复制代码
代码如下:
Not a Bug, Feature.

Desktop Notifications can only be triggered via a user action. Typing into the
JavaScript console has the same effect as raw javascript code embedded into the web
page (no user action). Typing the javascript into the location bar, however,
represents a user-action (the user is intentionally visiting a javascript link to
enable notifications, probably for sites that tend to use href="javascript:" instead
of onclick="".

I'm pretty sure this is a non-issue.

原来在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 said 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;
}

}

HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 #HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 #HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 #HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 #HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 #HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 #HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
You might like
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python处理大数字的方法
2015/05/27 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
医科大学生的自我评价
2013/12/04 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
python如何正确使用yield
2021/05/21 Python
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
python 字典和列表嵌套用法详解
2021/06/29 Python