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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 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 include加载文件两种方式效率比较
2010/08/08 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
自动检查并替换文本框内的字符
2006/06/30 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
Python制作词云的方法
2018/01/03 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
小学感恩节活动总结
2015/03/24 职场文书
项目合作意向书
2015/05/08 职场文书
公司员工管理制度
2015/08/04 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
美元符号 $
2022/02/17 杂记