notification 接口用于浏览器向用户提供通知内容;常见的如网页版的微信:

1、实现,需要Notifications API 提供的通知接口:

用法:

let notification = new Notification(title, options)

title参数:用于通知的主题;

options参数:是一个对象;用于配置被通知对象 notification 的属性

 var options={
dir://auto自动;ltr 从左到右;rtl 从右到左;
lang://指定通知使用的语言;
body://通知中额外显示的字符串;
icon://图片的URL,用于通知的图标;
}
var options = {
body: 'this is a beautiful world',
dir: 'rtl'
} var notify1 = new Notification('hello world',options); console.log(options.body==notify1.body)//true;
console.log(options.dir==notify1.dir)//true;
//options对象的属性都是绑定到 Notifiaction 的实例对象属性上的。
 

仅仅是构造一个Notification 对象的实例还不够;

2、获取通知权限 Notification.permission:

  granted: //用户已经明确的授予了显示通知的权限。.
  denied: //用户已经明确的拒绝了显示通知的权限。
  default: //用户还未被询问是否授权; 这种情况下权限将视为 denied.

3、请求用户权限:

Notification.requestPermission()

requestPermission()方法接受一个回调函数;这个回调函数接受一个参数;即requestPermission()返回的 permission 状态

4、完整的通知权限请求:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<button onclick="notify()">点我查看</button>
</div>
<script>
//先检查浏览器是否支持
function notify(){
if (!('Notification' in window)) {
alert('你的浏览器不支持Notification')
}
//检查是否拥有通知权限;有就通知,没有请求;
else if (Notification.permission=='granted') {
var options={
icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',
body:'such a beautiful wolrld!'
}
var notification=new Notification('hello wolrld!',options);
}else if (Notification.permission !== 'denied'){
Notification.requestPermission(
function(permission){
if (permission=='granted'){
var notification=new Notification('hello wolrld!');
}
}
);
}
}
</script>
</body>
</html>

需要注意的是;第一次需要申请权限;用户授权之后就能正常显示通知内容;用户如果忽视请求,再次点击会再次请求;用户选择拒绝,则浏览器会忽视,代码终止。

再次注意的是 ;Notification.requestPermission(callback)这种回调写法已经被弃用;取而代之的是基于promise的语法;其中js部分

//先检查浏览器是否支持
function notify(){
if (!('Notification' in window)) {
alert('你的浏览器不支持Notification')
}
//检查是否拥有通知权限;有就通知,没有请求;
else if (Notification.permission=='granted') {
var options={
icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',
body:'such a beautiful wolrld!'
}
var notification=new Notification('hello wolrld!',options); }else if (Notification.permission !== 'denied'){
Notification.requestPermission().then(function(result){
if(result=='granted'){
var notification=new Notification('hello wolrld!',options);
}
})
} }

测试地址(火狐正常)

谷歌浏览器对于这种写法没有响应,火狐正常; 原因是http站点的安全性问题,需要将站点升级到HTTPS。

将站点升级到https站点后,测试谷歌浏览器正常,测试地址

MDN上有更多的实例属性和事件处理;参考链接

												

用于浏览器桌面通知的Web API 接口 -notification的更多相关文章

  1. Winform混合式开发框架访问Web API接口的处理

    在我的混合式开发框架里面,集成了WebAPI的访问,这种访问方式不仅可以实现简便的数据交换,而且可以在多种平台上进行接入,如Winform程序.Web网站.移动端APP等多种接入方式,Web API的 ...

  2. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

  3. Http下的各种操作类.WebApi系列~通过HttpClient来调用Web Api接口

    1.WebApi系列~通过HttpClient来调用Web Api接口 http://www.cnblogs.com/lori/p/4045413.html HttpClient使用详解(java版本 ...

  4. 浏览器桌面通知Notification实践

    一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...

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

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

  6. Web API接口设计经验总结

    在Web API接口的开发过程中,我们可能会碰到各种各样的问题,我在前面两篇随笔<Web API应用架构在Winform混合框架中的应用(1)>.<Web API应用架构在Winfo ...

  7. Web API接口 安全验证

    在上篇随笔<Web API应用架构设计分析(1)>,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...

  8. 浏览器桌面通知(notifications)

    近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...

  9. Asp.Net Web Api 接口

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问.   由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...

随机推荐

  1. 模板引擎(smarty)知识点总结II

    今天咱们继续来学习smarty!!! 知识点1:对于三种变量 常量的引用 有哪三种变量?a.assign赋值 b.系统保留变量(包括:$smarty.get,$smarty.post,$smarty. ...

  2. 8.nginx防DDOS

    配置详解,查看链接:http://www.myhack58.com/Article/60/sort096/2015/59453.htm 配置文件: http {         #白名单        ...

  3. 关于理解python类的小题

    今天看了python部落翻译的一篇<一道python类的小题>文章,感觉挺有启发性,记录下来: print('A') class Person(object): print('B') de ...

  4. 微信小程序部署问题总结

    1.微信小程序免费SSL证书Https 申请(阿里云申请) 进入阿里云控制台后,选择CA证书服务 选择购买证书 但是阿里云的免费SSL证书藏得比较深,得这样操作才能显示出免费证书 点击Symantec ...

  5. Java UDP实现聊天功能代码

    我以前经常写的是基于TCP的网络编程,由于TCP建立连接鼻血要经过三次握手连接,服务器端需要阻塞式等待客户端的连接.而UDP则是可以直接向目的地址的目的端口上发送数据包,由于它只负责发送出去就好,不管 ...

  6. day 10 字符编码和文件处理 细节整理

    pycharm是文本编辑器. 大概理解为:  输出到屏幕上的时候,是解码过的字符串,用 decode 处理的时候要编码成相应的流, encode 成你要用的格式就可以了 1 .字符编码: 字符==== ...

  7. Linux入门篇(一)——文件

    这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...

  8. python编辑器pydev安装

    pydev实际上时eclipse的插件 1.安装eclipse(1)eclipse不需要安装,解压文件夹,点击eclipse.exe可使用 2.安装pydev (1) 解压pydev可看到featur ...

  9. 从0到1搭建spark集群---企业集群搭建

    今天分享一篇从0到1搭建Spark集群的步骤,企业中大家亦可以参照次集群搭建自己的Spark集群. 一.下载Spark安装包 可以从官网下载,本集群选择的版本是spark-1.6.0-bin-hado ...

  10. Java学习笔记3(数组)

    1.数组的定义: 第一种: public class ArrayDemo{ public static void main(String[] args){ //定义数组 int [] arr = ne ...