Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)

要显示一条通知,你需要先请求适当的权限。Web Notifications API 请求 权限有两种方式

1、Notification.requestPermission(callback)

2、Notification.requestPermission().then(function(status){  ...  })

Notification.requestPermission().then(function(status) {
console.log(status)            //status有三种状态 default默认(会询问用户是否开启通知的权限) granted已经允许开启通知 denied用户已经明确的拒绝了显示通知的权限。
  if(status == 'granted'){ 
     new Notification(title, { //new Notification是发送通知 title是标题 body是通知的内容 icon发送人的图标
        body: 'can i addfriend you',
        icon: 'http://combustion-engines.oss-cn-shanghai.aliyuncs.com/CombustionEnginesTupian/2017/dfbb2d68-97e4-4b9f-8d5f-82a636e3edcc.png'
})
}
});

详情可以去这里查看MDN web notification api

web notification api的更多相关文章

  1. HTML5中的Web Notification桌面通知

    大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...

  2. RSS & Server-Sent Events & HTML5 Notification API

    RSS Rich Site Summary https://en.wikipedia.org/wiki/RSS https://www.lifewire.com/what-is-rss-2483592 ...

  3. 简单了解HTML5中的Web Notification桌面通知

    原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...

  4. 介绍一个比较酷东西:HTML5 桌面通知(Notification API)

    Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...

  5. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  6. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  7. 【完全开源】百度地图Web service API C#.NET版,带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  8. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  9. Web动画API教程2:AnimationPlayer和Timeline

    本文转载: Web动画API教程2:AnimationPlayer和Timeline

随机推荐

  1. 如何安装 Sublime text 编辑器相关的插件

    Sublime是一个伟大的编辑器,具有可靠的基础功能,使编写代码变得愉快.您可以安装一个包管理器,以便于安装插件和添加新功能. 为什么使用包管理器(package manager) 包管理器可以方便地 ...

  2. ca72a_c++_标准IO库:面向对象的标准库

    /*ca72a_c++_标准IO库:面向对象的标准库继承:基类->派生类3个头文件9个标准库类型IO对象不可复制或赋值 ofstream, f--file,文件输出流ostringstream, ...

  3. 小师妹学JVM之:JIT中的LogCompilation

    目录 简介 LogCompilation简介 LogCompilation的使用 解析LogCompilation文件 总结 简介 我们知道在JVM中为了加快编译速度,引入了JIT即时编译的功能.那么 ...

  4. springboot + rabbitmq 做智能家居,我也没想到会这么简单

    本文收录在个人博客:www.chengxy-nds.top,共享技术资源,共同进步 前一段有幸参与到一个智能家居项目的开发,由于之前都没有过这方面的开发经验,所以对智能硬件的开发模式和技术栈都颇为好奇 ...

  5. 你所不知道的redis安装方法,穿一手鞋,看一手资料

    一 .准备工作 $ yum install wget $ cd /opt/ $ mkdir redis $cd redis $ ll wget http://download.redis.io/rel ...

  6. twaver html5 如何设置节点不可拖动

    解决思路: 1.创建一个不可移动的图层  :  layer 2.设置不可拖动的节点node 的图层为 layer 见代码: var box = new twaver.ElementBox(); var ...

  7. 001_动力节点_SpringMVC4_SpringMVC简介

    1.视频的下载地址是 下载地址:百度云盘 链接:http://pan.baidu.com/s/1ge58XW3 密码:yd5jhttp://www.java1234.com/a/javaziliao/ ...

  8. React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App

    项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...

  9. Python初识函数

    Python初识函数 函数理论篇 什么是函数 在编程语言中的函数不同于数学中的函数.不管是数学上的函数还是编程语言中的函数都是为了完成特定的某一功能而诞生的,他们的区别在于: 1.数学中的函数当输入的 ...

  10. Alink漫谈(八) : 二分类评估 AUC、K-S、PRC、Precision、Recall、LiftChart 如何实现

    Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Precision.Recall.LiftChart 如何实现 目录 Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Pre ...