用于浏览器桌面通知的Web API 接口 -notification
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的更多相关文章
- Winform混合式开发框架访问Web API接口的处理
在我的混合式开发框架里面,集成了WebAPI的访问,这种访问方式不仅可以实现简便的数据交换,而且可以在多种平台上进行接入,如Winform程序.Web网站.移动端APP等多种接入方式,Web API的 ...
- 浏览器桌面通知--Notification
前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...
- Http下的各种操作类.WebApi系列~通过HttpClient来调用Web Api接口
1.WebApi系列~通过HttpClient来调用Web Api接口 http://www.cnblogs.com/lori/p/4045413.html HttpClient使用详解(java版本 ...
- 浏览器桌面通知Notification实践
一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- Web API接口设计经验总结
在Web API接口的开发过程中,我们可能会碰到各种各样的问题,我在前面两篇随笔<Web API应用架构在Winform混合框架中的应用(1)>.<Web API应用架构在Winfo ...
- Web API接口 安全验证
在上篇随笔<Web API应用架构设计分析(1)>,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...
- 浏览器桌面通知（notifications）
近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...
- Asp.Net Web Api 接口
如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问. 由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...
随机推荐
- eKing Cloud基础云平台演进之路
出口转内销.首发于公司微信公众号,作者本人,现转载到此.本来写得比较技术,还算有点干货,但是结果被编辑咔咔咔,就只剩下下面这些内容. 大型企业如何开启自己的快速上云之路? 2017-12-08 易建科 ...
- LAMP第二部分apache配置
课程大纲:1. 下载discuz! mkdir /data/wwwcd /data/wwwwget http://download.comsenz.com/DiscuzX/3.2/Discuz_X3 ...
- Geode集群搭建
Geode集群搭建 1.下载安装包 http://mirror.bit.edu.cn/apache/geode/1.2.0/ 2.安装解压后即可直接使用 apache-geode-1.2.0 3.进入 ...
- C#的发展已经15年了 。。。历史发展
C#是微软公司在2000年6月发布的一种新的编程语言,主要由安德斯·海尔斯伯格(Anders Hejlsberg)主持开发,它是第一个面向组件的编程语言,其源码会编译成msil再运行.它借鉴了Delp ...
- 封装数据库配置文件App配置文件
<connectionStrings> <add name="strCon" connectionString="Data Source=.;Ini ...
- 根据图片的路径（绝对路径/相对路径都可以），生成base64的
根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- WPF-控件(1)
小记:最近公司使用WPF开发一款新的产品,从零基础开始学习WPF,在看书的过程中,有些内容需要规整到一起,最终选择了博客园,希望对自己所掌握的知识有所规整. --------------------- ...
- Android动画(二)-属性动画
我们在上一篇博客中,讨论了视图动画与帧动画.那么这节课则要讨论更复杂,更强大的Property animation(属性动画). 视图动画使用简单,但是功能也简单.(只有那四种功能).并且也不改变Vi ...
- <转>shell经典,shell十三问
(注:关于变量概念,我们留到下两章才跟大家说明.) 好了,更多的关于 command line 的格式,以及 echo 命令的选项,就请您自行多加练习.运用了... ----------------- ...
- Mac 配置Charles，抓取移动设备数据
有两篇很详细的教程可以参考 Charles 从入门到精通 mac环境下使用Charles抓包Https请求 但是在使用iPhone抓取https数据的时候会出现很多问题,总是提示失败. 需要注意的有: ...