最近在使用朋友网(不加链接，避免有打广告的嫌疑)，发现会出现提示“是否允许网站显示桌面通知？”，如下图所示：

这种做法，在页面加载完时直接调用请求，比起开心网的这种提示感觉有些野蛮了。开心网的桌面通知提示如下：

先检查用户是否已经允许了本站的桌面通知，在未允许的情况下：点击后Chrome才出现提示，感觉更人性化一些，起码这个通知出现是由用户主动触发的。

这两个网站，发现桌面通知主要用于webIM的消息提醒。查了下资料，大概了解和掌握了Chrome桌面通知的。做了如下图所示的一个Demo：

完整的示例代码如下：

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <title>Google 桌面通知</title>
   5: <meta name="generator" content="editplus" />
   6: <meta name="author" content="" />
   7: <meta name="keywords" content="" />
   8: <meta name="description" content="" />
   9: <meta http-equiv='content-type' content='text/html; charset=utf-8' />
  10: </head>
  11: <body>
  12:  
  13: <button id='btn'>显示桌面通知</button> 
  14:  
  15: <script type='text/javascript'>
   1:  
   2: document.querySelector("#btn").addEventListener('click', notify, false);
   3:  
   4: function notify() {
   5:     if (window.webkitNotifications) {
   6:         if (window.webkitNotifications.checkPermission() == 0) {
   7:             var notification_test = window.webkitNotifications.createNotification("http://images.cnblogs.com/cnblogs_com/flyingzl/268702/r_1.jpg", '标题', '内容'+new Date().getTime());
   8:             notification_test.display = function() {}
   9:             notification_test.onerror = function() {}
  10:             notification_test.onclose = function() {}
  11:             notification_test.onclick = function() {this.cancel();}
  12:             
  13:             notification_test.replaceId = 'Meteoric';
  14:  
  15:             notification_test.show();
  16:                         
  17:             var tempPopup = window.webkitNotifications.createHTMLNotification(["http://www.baidu.com/", "http://www.soso.com"][Math.random() >= 0.5 ? 0 : 1]);
  18:             tempPopup.replaceId = "Meteoric_cry";
  19:             tempPopup.show();
  20:         } else {
  21:             window.webkitNotifications.requestPermission(notify);
  22:         }
  23:     } 
  24: }
</script>
  16: </body>
  17: </html>
 
Setp：
1、先判断当前的浏览器是否支持开启桌面通知 window.webkitNotifications；
2、响应用户操作，如果用户之前已经允许本站的桌面通知，则window.webkitNotifications.checkPermission()会返回0；
3、如果用户之前拒绝或是未允许开启桌面通知，可使用window.webkitNotifications.requestPermission(callback);再次弹出询问用户的提示，否则当用户之前拒绝过，按钮点击了也是不会有响应操作的。
注：在给notification实例对象指定replaceId可防止弹出过多的桌面通知（类似唯一标识，弹出同名的replaceId通知实例时，后面的通知会覆盖之前的通知）。
但我在查看W3C的文档时，发现它里面标有一个setReplaceId的方法，可实际上是没有这个方法，取而代之的是名为“replaceId”的属性。
 
具体产品（如webIM）中如果实现的，可以参考这一篇文章：<HTML5实战之桌面通知>，如果去开心网查看实现的源码，可以看到如下的实现：
 
 
本文参考链接：
 
桌面通知，也可以由用户在Chrome浏览器中自定义：板手 -> 选项  -> 高级选项 –> 通知 (管理例外情况…)。
 
 

chrome浏览器的桌面通知的更多相关文章

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

    本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标

  2. selenium设置Chrome浏览器不出现通知,设置代理IP

    from selenium import webdriver PROXY = "" chrome_options = webdriver.ChromeOptions() prefs ...

  3. 如何让Chrome浏览器可以加载本地XML文件？

    Chrome浏览器的安全限制,禁止本地加载XML等外部文件,如何设置让其可以加载呢? 有两种方法,第一种是在本地服务器环境下浏览,采用 http://localhost/ 的方式浏览你的网页和文件,就 ...

  4. chrome浏览器访问Google的插件“谷歌访问插件”以及常用插件

    1.解决新版谷歌浏览器无法从该网站添加应用.拓展程序和用户脚本 1.在Google Chrome浏览器的桌面快捷方式上鼠标右键,选择属性(R). 2. 在目标(T)后添加参数   --enable-e ...

  5. chrome——关于chrome浏览器的奇葩问题

    前言 说下自己遇到的关于chrome的奇葩问题~ 问题 目前就一个,还是刚才才遇到的~ 消息通知 客户的chrome浏览器死活没有通知,检查后发现通知权限未开启, 通知权限开启后,还是没有提示,最后排 ...

  6. Chrome浏览器扩展开发系列之十：桌面通知Notification

    Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...

  7. Chrome浏览器桌面通知提示设置

    版本 24.0.1312.56 m     老版本23.* 桌面通知,也可以由用户在Chrome浏览器中自定义:板手 -> 选项  -> 高级选项 –> 通知 (管理例外情况…).

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

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

  9. chrome扩展,如何阻止浏览自动关闭桌面通知.

    (!!!!以前的好用的, 现在不行了~) 做chrome扩展桌面通知, 可能不想让浏览器自动关闭某个重要的桌面通知.那就不要使用 chrome.notifications.create 可以用 Web ...

随机推荐

  1. Android清理内存

    Android内存清理,利用ActivityManager获取当前正在运行的进程,清理这些进程释放内存. 可以根据importance的不同来判断前台或后台RunningAppProcessInfo ...

  2. webapp 性能优化

    webapp 不像传统页面,它生命周期更长,在手机端上,硬件环境并没有pc上那么好.所以性能的优化尤为重要. webapp的性能优化主要分为两个方面 网络请求优化 和 页面渲染优化 , 我们对于性能优 ...

  3. Android多媒体开发-- android中OpenMax的实现整体框架

    1.android中用openmax来干啥? android中的AwesomePlayer就 是用openmax来做(code)编解码,其实在openmax接口设计中,他不光能用来当编解码.通过他的组 ...

  4. JavaScript关闭浏览器

    (*^__^*) 嘻嘻……,以前我找关闭浏览器选项卡的代码找不到,我还以为要用后台代码关呢?今天发现只要简单2句JavaScipt代码就可以了.看来很多东西还是在于平时的积累啊的说! 模仿延儿的口气了 ...

  5. ASP.NET通用权限验证组件实现

    沙发(SF)通用权限验证组件 开篇 本篇介绍通用权限验证的实现代码思路,总共分为导入参数.解析XML.根据XML配置进行处理.返回结果. 代码架构图 1.   类介绍 1.SFWebPermissio ...

  6. Android 学习笔记（一）

    环境配置在网上搜索的一大堆. 这里简单发几个连接. http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html http://jing ...

  7. WdatePicker日历控件使用方法（转）

    转自:http://www.cnblogs.com/weixing/archive/2011/08/15/2139431.html WdatePicker日历控件使用方法   1. 跨无限级框架显示 ...

  8. dir_colors linux颜色配置

    在控制台下,用ls,就会发现,shell将不同类型的文件项目显示为不同的颜色.者可以提高效率,不用ls -l便能大概的把各个文件的类型情况了解一下. 你有没有想过更改这个着色配置呢? 其实,在/etc ...

  9. linux下C++对线程的封装

    之前一直是使用C语言,前段时间转做C++.无论使用什么语言,多线程编程都是不可或缺的.最近项目中又用到了线程,现在将线程的封装做出总结: 1.线程类中应该包含线程ID.线程的状态以及线程基本操作等. ...

  10. [转]C++实现系统服务暂停、停止、启动

    /* 名称:系统服务管理 语言:C++ 介绍:对Windows系统服务的状态获取,服务暂停,开启,停止操作代码 */ void CStartServiceDlg::OnBnClickedButton1 ...