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 相关文章推荐
css3 border-image使用说明
Jun 23 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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制作验证码
2016/10/12 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python使用socket向客户端发送数据的方法
2015/04/29 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
python将unicode转为str的方法
2017/06/21 Python
详解python里的命名规范
2018/07/16 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
大学生实习鉴定评语
2014/04/25 职场文书
车辆转让协议书
2014/09/24 职场文书
民事赔偿协议书
2014/11/02 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
500字作文之周记
2019/12/13 职场文书