介绍一个比较酷东西: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,用于向用户显示通知信息.该通知是 ...
随机推荐
- 【BZOJ 4353】 Play with tree
[题目链接] 点击打开链接 [算法] 树链剖分 对于线段树的每个节点,记录这段区间的最小值,最小值的个数,值为0的个数,此外,还要维护两个懒惰标记 [代码] 本题细节很多,写程序时要认真严谨! #in ...
- LOJ 6089 小Y的背包计数问题 —— 前缀和优化DP
题目:https://loj.ac/problem/6089 对于 i <= √n ,设 f[i][j] 表示前 i 种,体积为 j 的方案数,那么 f[i][j] = ∑(1 <= k ...
- bzoj1036 [ZJOI2008]树的统计Count——LCT
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1036 LCT水题! 然而没有1A(咬牙)! 注意值有负数,所以取 max 的话要把作为“哨兵 ...
- Golang 入门 : 竞争条件
笔者在前文<Golang 入门 : 理解并发与并行>和<Golang 入门 : goroutine(协程)>中介绍了 Golang 对并发的原生支持以及 goroutine 的 ...
- mysql5.7 1055
错误提示: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggreg ...
- ActiveMQ应用
一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...
- Shell脚本,简单& 强大
摘自<码农增刊Linus与Linux>,章节:你可能不知道的Shell. 最近阅读完这本书,觉得其中有很多不错的内容,这是其中的一个Shell小甜点,拿来和大家一起分享一下,增加了 ...
- cocos2dx使用lua和protobuf
为了使游戏开发更加方便快捷,我继续了protobuf在lua下的尝试. socket使用的是cocos2dx集成的websocket. 先说下环境:cocos2d-x-2.2.1 + protobuf ...
- Js变量类型
值类型和引用类型 值类型(基本类型):5种,Number String Boolean null undefined var a=10; var b=a; a=2; console.log(b); a ...
- (1)麻省理工:计算机科学和 Python 编程导论
本门课用的语言是python2.7,我的主要学习语言是C++11,所以不是特殊说明,则认为和C++中的是一样的(不管是语法还是表达式),当然,也有我不懂而错认为与C++一样的东西~ Week1 第一讲 ...