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)的更多相关文章

  1. html5桌面通知,notification的使用,右下角出现通知框

    1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...

  2. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  3. HTML5桌面通知:notification

    最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...

  4. 文件系统:介绍一个高大上的东西 - 零基础入门学习Python030

    文件系统:介绍一个高大上的东西 让编程改变世界 Change the world by program 接下来我们会介绍跟Python的文件相关的一些十分有用的模块.模块是什么?不知大家对以下代码还有 ...

  5. 轻松让HTML5可以显示桌面通知Notification非常实用

    使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...

  6. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  7. h5桌面通知Notification

    H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...

  8. HTML5桌面通知:notification api

    1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...

  9. HTML5 桌面通知:Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...

随机推荐

  1. RDA 工模

    1.工模GUI如下图: 注意两个API接口,_APP_Update_Layer()/UpdateNodeFunctionContent() 这两个接口一个是刷新ListView,另一个刷新ListVi ...

  2. 让你彻底明白JAVA中堆与栈的区别

    原文地址:http://www.2cto.com/kf/201302/190704.html 简单的说: Java把内存划分成两种:一种是栈内存,一种是堆内存. 在函数中定义的一些基本类型的变量和对象 ...

  3. E20170531-hm

    passage  n.     通路; 通道 discrete   adj. 分离的,不相关联的; 分立式; 非连续; alternative   替代的; 另类的; 备选的; 其他的; intent ...

  4. 洛谷P5398 [Ynoi2018]GOSICK(二次离线莫队)

    题面 传送门 题解 维包一生推 首先请确保您会二次离线莫队 那么我们现在的问题就是怎么转移了,对于\(i\)和前缀\([1,r]\)的贡献,我们拆成\(b_i\)和\(c_i\)两部分,其中\(b_i ...

  5. Ajax 知识点总结

    1.AJAX的优缺点都有什么? 最大的一点是页面无刷新,用户的体验非常好.使用异步方式与服务器通信,具有更加迅速的响应能力.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻 ...

  6. linux C编程 Makefile的使用

    Makefile的作用就是"自动化编译" 一.Makefile基本规则 下面给出几个简单实例: 第一步:分别用vim创建prog.c code.c code.h三个文件 prog. ...

  7. android序列化(1)Parcelable与Serializable

    1.Android中实现序列化有两个选择 一是实现Serializable接口(是JavaSE本身就支持的),实现Serializable接口非常简单. 一是实现Parcelable接口(是Andro ...

  8. .net环境下程序一些未知错误的调试

    由于线程冲突等一系列原因导致的处理调试方法 1.打开[事件查看器]查找出错误的地方 [控制面板]-[系统和安全]-[管理工具]-[事件查看器]

  9. Geoserver常见问题总结

    原文地址 :http://blog.csdn.net/mygisforum/article/details/8249093 http://www.cnblogs.com/wang985850293/p ...

  10. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...