使用场景  常见的大多适用于提示用户有新的未读消息,一系列推送广告/系统更新消息等......

知道了使用场景后, 接着先上一段完整代码

 //注册权限
Notification.requestPermission(function (status) {
// 这将使我们能在 Chrome/Safari 中使用 Notification.permission
if (Notification.permission !== status) {
Notification.permission = status;
}
});
//消息推送
var n = new Notification('博客更新提示',{
body: '您的博客园有新文章发布,欢迎关注哦',
tag: 'avenstar', //代表通知的一个识别标签,相同tag时只会打开同一个通知窗口
icon: 'https://pic.cnblogs.com/avatar/819169/20171029125922.png',
requireInteraction: true //通知保持有效不自动关闭,默认为false
})

打开Chrome浏览器,F12运行效果如下 (针对上述代码,下面逐一展开说明)

请求权限 requestPermission

 Notification.requestPermission(function (status) {
// 这将使我们能在 Chrome/Safari 中使用 Notification.permission
if (Notification.permission !== status) {
Notification.permission = status;
}
});

检查当前权限状态(查看你是否已经有权限)  Notification.permission 该属性的值将会是下列三个之一:

default 用户还未被询问是否授权,所以通知不会被显示。
granted 表示之前已经询问过用户,并且用户已经授予了显示通知的权限。
denied 用户已经明确的拒绝了显示通知的权限。

消息通知  Notification

var n = new Notification('博客更新提示',{
body: '您的博客园有新文章发布,欢迎关注哦',
tag: 'avenstar', //代表通知的一个识别标签,相同tag时只会打开同一个通知窗口
icon: 'https://pic.cnblogs.com/avatar/819169/20171029125922.png',
requireInteraction: true //通知保持有效不自动关闭,默认为false
})

资料参考

https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Using_Web_Notifications

http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

桌面消息通知:HTML5 Notification的更多相关文章

  1. Android消息通知(notification)和PendingIntent传值

    通知栏的自定义布局:转:http://blog.csdn.net/vipzjyno1/article/details/25248021 拓展 实现自定义的通知栏效果: 这里要用到RemoteViews ...

  2. HTML5桌面通知:notification

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

  3. HTML5桌面通知:notification api

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

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

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

  5. 【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)

    序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式).感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下 ...

  6. HTML5开启浏览器桌面通知 Web Notification

    说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...

  7. HTML5 桌面消息提醒

    Notification HTML5新属性,复制代码创建HTML文件,浏览器查看效果 <!DOCTYPE html> <html lang="en"> &l ...

  8. HTML5新特性[ Notifications ] 桌面消息

    在执行完以上代码后,我们就成功地创建了一个消息框实例,在Chrome下面它最终会显示成这样: 到这里我们已经成功了一半,但能不能正确地显示出这个消息框,最终还取决于用户的授权.鉴于浏览器的安全机制,只 ...

  9. html5 notification桌面提醒功能

    html5 notification桌面提醒功能 <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

  1. nmap扫描某段网络连通性

    nmap -v -sP 10.0.10.0/24 进行ping扫描,打印出对扫描做出响应的主机,不做进一步测试(如端口扫描或者操作系统探测): nmap -sP 192.168.1.0/24 仅列出指 ...

  2. jdk版本查看,以及java -version 和JAVA_HOME不一致问题

    一.jdk版本查看及位数查看 在cmd进入命令行窗口,输入java -version 可以查看安装的jdk版本,如图: 当有64-bit时代表是64位jdk,如果没有则默认是32位的. 二.java ...

  3. Python数据分析(二): Numpy技巧 (1/4)

    In [1]: import numpy numpy.__version__ Out[1]: '1.13.1' In [2]: import numpy as np  

  4. 宝藏(树形DP)

      这道题目是十分考验思维的,n^2应该还是比较好想的,主要是如何转移根的问题.转移根,在我看来应该是树形dp最难的一部分了, 一般学会如何转移根,也就差不多考验通吃树形dp了. 下面转一转大佬链接: ...

  5. NOIP2017SummerTraining0726

    三道比较简单的题,还以为是八校考试的题目,但是并不是,无语了,第三题其实看了挺久的,一看到图,就想到了二分图,网络流之类的算法,但是尽力往这个方向想了好久都没什么思路, 最后从简单入手,然而没什么结果 ...

  6. php Socket通信

    <?php error_reporting(0); $host = "0.0.0.0"; $port = 1082; $maxUser = 10; set_time_limi ...

  7. 配置zabbix agent向多个server发送数据

    1.背景: agent 端:dba-test-hzj02  172.16.59.197 server端:172.16.59.197  ,172.16.59.98 2.方式: 配置多个server,se ...

  8. ASP.NET没有魔法——ASP.NET MVC 与数据库大集合

    ASP.NET没有魔法——ASP.NET与数据库 ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL ASP.NET没有魔法——ASP.NET MVC 与数据库之ORM ASP.N ...

  9. 原生API实现拖拽上传文件实践

    功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...

  10. DevOps之主机

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. 主机(Host) 关于主机,知识与技能的层次(知道.理解.运用),理论与实践的方面(原理.技术 ...