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. centos7上安装memcached以及PHP安装memcached扩展(一)

    安装memecached 第一步:安装libevent # tar zvxf libevent-2.1.8-stable.tar.gz # cd libevent-2.1.8-stable # ./c ...

  2. php5.5下安装pdflib的步骤

    php5.5下安装pdflib的步骤 1. 下载pdflib 下载地址为:http://www.pdflib.com/download/pdflib-family/pdflib/ 然后选择对应的版本, ...

  3. 图解KMP以及next数组的求法

    在计算机科学中,Knuth-Morris-Pratt字符串查找算法(简称为KMP算法)可在一个主文本字符串S内查找一个模式串P的出现位置.此算法通过运用对这个模式串在不匹配时本身就包含足够的信息来确定 ...

  4. 如何利用Excel设计一个唱票统计系统?

    具体操作如下: 首先需要一个如下的数据结构. 唱票数G列区域,不能手动输入候选人票数,这样很不方便,所以我们需要一个窗体控件,用点击鼠标的方法来实现唱票.在“开发工具-插入-数值调节钮”下图3处,然后 ...

  5. Python爬虫小白入门(一)入门介绍

    一.前言 你是不是在为想收集数据而不知道如何收集而着急? 你是不是在为想学习爬虫而找不到一个专门为小白写的教程而烦恼? Bingo! 你没有看错,这就是专门面向小白学习爬虫而写的!我会采用实例的方式, ...

  6. wget介绍和命令总结

    参考资料: https://www.cnblogs.com/ftl1012/p/9265699.html https://www.cnblogs.com/lsdb/p/7171779.html cur ...

  7. Windows 程序设计(3) 关于字符串

    1. 宽窄字节的区别及重要性 1.1 宽窄字节简介: C语言/C++语言,使用的字符串指针就是 char* 类型,C++中的字符串是 string,内部也是对 char* 的封装 窄字节 其实最早的系 ...

  8. Ios App破解之路二 JJ斗地主

    前提条件: 越狱手机里, 安装了 <JJ斗地主> 使用砸壳工具clutch 下载地址: https://github.com/KJCracks/Clutch/releases dzq:~/ ...

  9. Docker图形界面管理

    之前都是使用命令行进行Docker的管理,这里简单介绍一下Docker的图形界面管理.之所以说简单介绍,是因为在生产环境都是集群,很少使用图形界面管理单台Docker主机,所以就演示记录一下,在个人测 ...

  10. dart快速入门教程 (6)

    6.内置操作方法和属性 6.1.数字类型 1.isEven判断是否是偶数 int n = 10; print(n.isEven); // true 2.isOdd判断是否是奇数 int n = 101 ...