使用HTML5的Notification API制作web通知的教程(转)
var notification=new Notification(‘Notification Title',{
body:'Your Message'
});
上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题,而第二个参数则是一个option 对象,该对象可设置以下属性:
- body :设置通知栏的正文内容。
dir :定义通知栏文本的显示方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
lang :声明通知栏内文本所使用的语种。(译注:该属性的值必须属于BCP 47 language tag。)
tag:为通知栏分配一个ID值,便于检索、替换或移除通知栏。
icon :设置作为通知栏icon的图片的URL
获取权限
在显示通知栏之前需向用户申请权限,只有用户允许,通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值:
- default:用户处理结果未知,因此浏览器将视为用户拒绝弹出通知栏。(“浏览器:你没要求通知,我就不通知你了”)
denied:用户拒绝弹出通知栏。(“用户:从我的屏幕里滚开”)
granted:用户允许弹出通知栏。(“用户:欢迎!我很高兴能够使用这个通知功能”) Notification.requestPermission(function(permission){
//display notification here making use of constructor
});<button id="button">Read your notification</button>
#button{
font-size:.1rem;
width:200px;
height:60px;
border:2px solid #df7813;
border-radius:20px/50px;
background:#fff;
color:#df7813;
}
#button:hover{
background:#df7813;
color:#fff;
transition:.4s ease;
}document.addEventListener('DOMContentLoaded',function(){
document.getElementById('button').addEventListener('click',function(){
if(! ('Notification' in window) ){
alert('Sorry bro, your browser is not good enough to display notification');
return;
}
Notification.requestPermission(function(permission){
var config = {
body:'Thanks for clicking that button. Hope you liked.',
icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
dir:'auto'
};
var notification = new Notification("Here I am!",config);
});
});
});关闭通知的实例方法:
var n = new Notification(theTitle,options);
setTimeout(n.close.bind(n), );- 参考:http://www.jb51.net/html5/323493.html
- https://codepen.io/imprakash/pen/ZYLayY
使用HTML5的Notification API制作web通知的教程(转)的更多相关文章
- 介绍一个比较酷东西:HTML5 桌面通知(Notification API)
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...
- HTML5桌面通知:notification api
1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...
- HTML5 桌面通知:Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- RSS & Server-Sent Events & HTML5 Notification API
RSS Rich Site Summary https://en.wikipedia.org/wiki/RSS https://www.lifewire.com/what-is-rss-2483592 ...
- web notification api
Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异) 要显示一条通知,你需要先 ...
- ASP.NET WEB API微信支付通知接口,返回xml数据,微信服务器不识别问题
原文:ASP.NET WEB API微信支付通知接口,返回xml数据,微信服务器不识别问题 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MrTra ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- @font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- JAVA-数据类型、变量、常量
http://blog.csdn.net/yuhailong626/article/details/7245571 http://www.cnblogs.com/JackieADBM/p/534222 ...
- 擦亮自己的眼睛去看SQLServer之谈谈锁机制
http://www.cnblogs.com/yueyue_jwfm/category/292724.html
- react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...
- 【转 :Hibernate 缓存机制】
转自:http://www.cnblogs.com/wean/archive/2012/05/16/2502724.html Hibernate 缓存机制 一.why(为什么要用Hibernate缓存 ...
- 世界围棋人机大战、顶峰对决第一盘:围棋世界冠军Lee Sedol(李世石,围棋职业九段)对战Google DeepMind AlphaGo围棋程序
Match 1 - Google DeepMind Challenge Match: Lee Sedol vs AlphaGo 很多网站对世界围棋大战进行了现场直播,比如YouTube.新浪.乐视.腾 ...
- 第六章 consul UI
1.建立三个consul节点(一个server+两个client) 具体的过程见http://www.cnblogs.com/java-zhao/p/5375132.html 1)在终端下启动vagr ...
- log4net 使用笔记
一.Log4net特征 1.自定义日志输出级别 Log4net将日志分为五个级别优先级从高到低依次:FATAL > ERROR > WARN > INFO > DEBUG,此外 ...
- 小课堂week17 编程范式巡礼第二季 并发那些事
编程范式巡礼第二季 并发那些事 继续上周的编程范式话题,今天想聊一下并发范式. 并发也算一种范式? 真正的并发式编程,绝不只是调用线程API或使用synchronized.lock之类的关键字那么简单 ...
- Java项目在jsp页面中引入jquery框架的步骤
环境:在Java web项目中引入juqery框架 工具:MyEclipse8.5 [步骤如下] A:新建一个Java web项目TestJquery,在WebRoot目录下创建一个jquery文件 ...
- <The Art of Readable Code> 笔记二 (上)
第2章 封装信息到名字 (Packing information into names) 2.1 use specific words GetPage() 不如 FetchPage() 和 Dow ...