介绍一个比较酷东西:HTML5 桌面通知(Notification API)
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。
一、用户权限
想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用,避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的?
Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:
(1)default :不知道用户的选择,默认。
(2)granted :用户允许。
(3)denied :用户拒绝。
if(Notification.permission === 'granted'){
console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
console.log('用户拒绝通知');
}else{
console.log('用户还没选择,去向用户申请权限吧');
}
二、请求权限
当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('用户允许通知啦')
} else if (permission === 'denied') {
console.log('用户拒绝通知啦')
}
})
三、推送通知
获取用户授权之后,就可以推送通知了。
var notification = new Notification(title, options)
参数:
title:
一定会被显示的通知标题
options(可选参数)
一个被允许用来设置通知的对象。它包含以下属性
dir:文字方向:auto(自动);ltr:(从左到右);rtl:(从右到左)
lang:指定通知中所使用的语言
body:通知中额外显示的字符串
data:想要和通知关联的任务类型的数据
tag:赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
icon:一个图片的URL,将被用于显示通知的图标
image:要在通知中显示的图像的URL
requireInteraction:通知保持有效不自动关闭,默认为false。
var n = new Notification('状态更新提醒',{
body: '你的朋友圈有3条新状态,快去查看吧',
tag: 'test',
requireInteraction: true
})
四、关闭通知
Notification.close()
五、权限
当你要在开放 web 应用中使用通知时,请确保将 desktop-notification 权限添加到你的 manifest 文件中。通知可以被用于任何权限级别,hosted 或更高。
"permissions": {
"desktop-notification":{}
}
六、浏览器兼容性(移动端几乎不支持)

介绍一个比较酷东西:HTML5 桌面通知(Notification API)的更多相关文章
- html5桌面通知,notification的使用,右下角出现通知框
1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...
- HTML5桌面通知(Web Notifications)实例解析
先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...
- HTML5桌面通知:notification
最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...
- 文件系统:介绍一个高大上的东西 - 零基础入门学习Python030
文件系统:介绍一个高大上的东西 让编程改变世界 Change the world by program 接下来我们会介绍跟Python的文件相关的一些十分有用的模块.模块是什么?不知大家对以下代码还有 ...
- 轻松让HTML5可以显示桌面通知Notification非常实用
使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- h5桌面通知Notification
H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...
- HTML5桌面通知:notification api
1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...
- HTML5 桌面通知:Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
随机推荐
- 最常用的~正则表达式-相关js函数知识简洁分享【新手推荐】
一.正则表达式的创建 JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 varregObj =newRegExp("(^\s+)|(\s+ ...
- bzoj 1016: [JSOI2008]最小生成树计数【dfs+克鲁斯卡尔】
有一个性质就是组成最小生成树总边权值的若干边权总是相等的 这意味着按边权排序后在权值相同的一段区间内的边能被选入最小生成树的条数是固定的 所以先随便求一个最小生成树,把每段的入选边数记录下来 然后对于 ...
- 1617: [Usaco2008 Mar]River Crossing渡河问题(dp)
1617: [Usaco2008 Mar]River Crossing渡河问题 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1219 Solved: ...
- 10.27night清北刷题班
/* 枚举每个部分的总和,利用前缀和进行检验. 如果能分成4部分就一定能分成2部分,就筛了一边素数优化.清空数组!!! */ #include<bits/stdc++.h> #define ...
- NOIP前的刷题记录
因为这几天要加油,懒得每篇都来写题解了,就这里记录一下加上一句话题解好了 P4071 [SDOI2016]排列计数 组合数+错排 loj 6217 扑克牌 暴力背包 P2511 [HAOI2008 ...
- 第三章 K近邻法(k-nearest neighbor)
书中存在的一些疑问 kd树的实现过程中,为何选择的切分坐标轴要不断变换?公式如:x(l)=j(modk)+1.有什么好处呢?优点在哪?还有的实现是通过选取方差最大的维度作为划分坐标轴,有何区别? 第一 ...
- 【杂文】C++头文件加速
[杂文]C++头文件加速 骚年,冲钱送开挂哦,可以助你超神于OI战场 如果你发现你的暴力超时了的话,可以尝试用一下头文件加速,说不定就过了呢! #pragma once//只编译一次 #pragma ...
- 2017杭电多校第六场1008 Kirinriki
传送门 Kirinriki Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) To ...
- Storm概念学习系列之storm的雪崩
不多说,直接上干货! Storm的雪崩问题的解决办法1: Storm概念学习系列之并行度与如何提高storm的并行度 Storm的雪崩问题的解决办法2:
- RaspberryPi cProfile使用
使用sudo python -m cProfile -o 1.cprof your.py生成cprof文件 windows下安装snakeviz:pip install -i https://pypi ...