HTML5开发桌面提醒功能

桌面提醒的介绍

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过，目前支持Desktop Notification功能的浏览器只有Chrome5+。在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决以下几个问题：

1. 收到多条消息时确保只出现一条通知;
2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
3. 当用户使用多Tab开启多个存在IM的页面时，只要有一个页面处于Focus状态将不出现通知;
4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口
5.此外，还需要解决一个便利性问题

桌面提醒Notification的API

window.webkitNotifications

requestPermission 请求通讯许可
checkPermission 检查通讯许可
createNotification 创建通讯
show 显示通知

代码实现

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head
 4 <meta charset="gbk">
 5 <title>Creating OS notifications in HTML5</title>
 6 </head>
 7 <body>
 8 <input type="button" value="验证授权" onclick="init();" />
 9 <input type="button" value="弹出消息" onclick="notify();" />
10
11     <script type="text/javascript">
12         const miao = 5;
13
14         function init() {
15             if (window.webkitNotifications) {
16                 window.webkitNotifications.requestPermission();
17             }
18         }
19
20         function notify() {
21             var icon = "logo.png";
22             var title = "Hello World";
23             var body =  "You Are My World (5秒后自动关闭)";
24
25             if (window.webkitNotifications) {
26                 if (window.webkitNotifications.checkPermission() == 0) {
27                     var popup = window.webkitNotifications.createNotification(icon, title, body);
28                     popup.ondisplay = function(event) {
29                         setTimeout(function() {
30                             event.currentTarget.cancel();
31                         }, miao * 1000);
32                     }
33                     popup.show();
34                     popup.show();
35                 } else {
36                     window.webkitNotifications.requestPermission();
37                     return;
38                 }
39             }
40         }
41     </script>
42
43 </body>
44 </html>

HTML5开发桌面提醒功能 Demo html5-desktop-notification.html (只支持 Chrome 浏览器)

转载于:https://www.cnblogs.com/iwanc/archive/2012/09/02/2667863.html

HTML5开发桌面提醒功能相关推荐

html5 桌面提醒参数,[HTML5]Notification桌面提醒功能
桌面提醒的介绍桌面通知功能能够让浏览器即使是最小化状态也能够将消息通知给用户.这和WebIM是最为天然的结合.弹出来的内容只能是文本,暂不支持HTML. Notification桌面提醒功能的好处 ...
HTML5 Notification桌面提醒功能
桌面通知功能能够让浏览器即使是最小化状态也能将信息通知给用户,这和WebIM是最为天然的结合. 1.先判断浏览器支持情况 alert(Boolean(window.Notification)); ...
Chrome桌面提醒功能
Chrome桌面提醒功能,兼容新老版本,firefox最新版本也通过 //桌面提醒 function notify(title, content) {if(!title && !con ...
chrome桌面提醒功能使用
桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户.这和WebIM是最为天然的结合.不过,目前支持Desktop Notification功能的浏览器只有Chrome5+. 关于通知的基础知 ...
html5开发桌面程序调用dll,使用Visual Studio开发Html5应用
Visual Studio 一直以来是开发微软旗下应用的利器,只要是开发微软相关的应用无论是Windows程序,WPF,Asp.Net,WinRT Surface,WindowsPhone 等微软旗下 ...
android 桌面提醒功能,安卓手机桌面上使用的工作提醒软件选择哪个？
原标题:安卓手机桌面上使用的工作提醒软件选择哪个? 安卓手机可以说是目前手机市场的主力军,很多人的手机都是安卓系统,在辅助办公方面,手机上的工具也是比较多的.比如经常出差的人会将一些比较重要的备忘事项 ...
html5开发桌面界面设计,HTML5触摸界面设计与开发
HTML5触摸界面设计与开发编辑锁定讨论上传视频 <HTML5触摸界面设计与开发>是人民邮电出版社于2014年出版的一本图书,作者是伍兹 (Stephen Woods).[1] 中 ...
HTML5 API详解（14）:Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
html5 桌面提醒参数,html5 桌面提醒：Notifycations应用介绍
HTML5中的桌面提醒(web notifications)可以在当前页面窗口弹出一个消息框,这个消息框是跨 Tab 窗口的,这在用户打开多个 tab 浏览网页时,提醒比较方便,容易让用户看到.目前只 ...

HTML5开发桌面提醒功能

桌面提醒的介绍

桌面提醒Notification的API

代码实现

HTML5开发桌面提醒功能相关推荐

最新文章

热门文章

HTML5开发 桌面提醒功能

桌面提醒的介绍

桌面提醒Notification的API

代码实现

HTML5开发 桌面提醒功能相关推荐

最新文章

热门文章

HTML5开发桌面提醒功能

HTML5开发桌面提醒功能相关推荐