[html5] (Notification) 桌面通知
前几天要做一个桌面通知的功能,翻查以前做的笔记,发现webkitNotifications
这个已经不能用了,baidu了下,基本都是介绍webkitNotifications
的,后来在SOF上找到答案,现在chrome支持的是Notification
,估计是W3C标准化了。api也变了,mark之。
Notification
Properties
title:"别动神仙说:" body:"这里是body" icon:"http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40" tag:"1"// 通知框ID,相同id可替换,而不是出现新的通知框lang:""// 语言 dir:"auto"// 文字方向
new Notification('别动神仙说:', {
body: '这里是body',
icon: 'http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40',
tag: 1
});
onshow: null // 显示通知框时调用 onclick: null // 点击通知框时调用 onclose: null // 点击通知框关闭按钮时调用 onerror: null
例如实现通知弹出一段时间后自动关闭
var notification = new Notification('标题');
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 3000);
}
Notification.permission 有三种状态
default
:未设置过为这个状态,通过Notification.requestPermission()可以询问用户是否允许通知granted
:用户点击允许后的状态denied
: 用户点击拒绝后的状态,通知框不可用
Methods
Notification.requestPermission() 一般在Notification.permission === 'default'时,用户通过点击等操作调用
document.onclick = function() {
Notification.requestPermission()
}
使用回调
Notification.requestPermission(function (permission) {
// 可在确认后直接弹出
if (permission === 'granted') {
var notification = new Notification('弹窗');
}
});
Notification.close() 通知框关闭
function notify() {
if (!("Notification"in window)) {
alert("This browser does not support desktop notification");
return;
}
if (Notification.permission ==="granted") {
var notification = new Notification("Hi there!");
}
else if (Notification.permission === 'default') {
Notification.requestPermission(function (permission) {
if (permission ==="granted") {
var notification = new Notification("Hi there!");
}
});
}
}
References:
https://developer.mozilla.org/en-US/docs/Web/API/Notification.tag
from :http://www.thinksaas.cn/group/topic/347544/
[html5] (Notification) 桌面通知的更多相关文章
- html5 notification桌面提醒功能
html5 notification桌面提醒功能 <!DOCTYPE html> <html lang="en"> <head> <met ...
- HTML5中的Web Notification桌面通知(右下角提示)
html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...
- 聊聊HTML5中的Web Notification桌面通知
有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...
- 简单了解HTML5中的Web Notification桌面通知
原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...
- HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...
- HTML5桌面通知:notification api
1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...
- H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
- HTML5桌面通知:notification
最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...
- HTML5 桌面通知:Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
随机推荐
- Oracle的AUTOTRACE功能
ORACLE9i在使用autotrace之前,需要作一些初始设置: 1.用sys用户运行脚本utlxplan.sql创建PLAN_TABLE表 脚本目录:(UNIX:$ORACLE_HOME/rdbm ...
- EXTJS 4.2 资料 控件GroupingGrid
http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html
- Eat the Trees hdu 1693
Problem DescriptionMost of us know that in the game called DotA(Defense of the Ancient), Pudge is a ...
- [转载]MongoDB优化的几点原则
.查询优化 确认你的查询是否充分利用到了索引,用explain命令查看一下查询执行的情况,添加必要的索引,避免扫表操作. .搞清你的热数据大小 可能你的数据集非常大,但是这并不那么重要,重要的是你的热 ...
- 关于ref与out的区别
写在最前面 这几天一直在公司接受培训,都是一些基础的知识,同时也乘着这个机会巩固一下自己的基础,基础太重要了.前些时一直看的是多线程方面的知识,接下来我会写一些其他方面的知识,毕竟作为一个实习新人得和 ...
- jquery图片放大器插件
将鼠标移动到一张图片上来的时候,放大该图片的某些细节. <html> <head> <script src="../js/jquery-1.6.js" ...
- hdu 3859 Inverting Cups
题意是给出A个杯子,一开始都朝上,每次可以翻B个杯子,问最少需要翻转多少次可以让所有杯子都朝下. 分类讨论: 首先对于A%B==0一类情况,直接输出. 对于A>=3B,让A减到[2B,3B)区间 ...
- 【Mysql进阶技巧(1)】 MySQL的多表关联与自连接
自连接 测试数据准备 CREATE TABLE `t2` ( `id` int(11) NOT NULL, `gid` char(1) DEFAULT NULL, `col1` int(11) DEF ...
- Linux下Nginx+Tomcat整合的安装与配置
因为nginx处理静态页面的速度很快,并且是免费的,它还可以配置负载均衡的服务器集群来搭建多个tomcat,所以nginx+tomcat是企业搭 建javaee项目很好的选择.nginx主要是通过反向 ...
- Qt之界面数据存储与获取(使用setUserData()和userData())
在GUI开发中,往往需要在界面中存储一些有用的数据,这些数据可以来配置文件.注册表.数据库.或者是server. 无论来自哪里,这些数据对于用户来说都是至关重要的,它们在交互过程中大部分都会被用到,例 ...