介绍:
桌面通知,我们经常看到的比如QQ,Skype在右下角的消息提醒。在网页中我们也可以用Javascript模拟实现这一功能,只是这个消息框中浏览器中。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开,但WHATWG下在讨论的一种特性Notification可以跨越沙盒通过桌面向用户发出浏览器的通知。现在在Html5中也可以实现这一功能,目前Notification的浏览器支持情况不大好,我测试了一下,IE9,FF12,Opera11不支持,Chrome支持最好。
如何使用:
一、检测浏览器是否支持通过window.webkitNotifications可以判断浏览器是否支持notification
if(!window.webkitNotifications){
alert("您的浏览器不支持Notification桌面通知!");
}
二、权限只有获得用户授权才可以显示Notification。
//请求授权,如果成功则执行回调函数
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}else{
//show Notification here..
}
三、创建Notification参考:http://dvcs.w3.org/hg/notifications/raw-file/tip/Overview.html通过chrome的Debug,我们可以看到通过window的webkitNotifications对象可以创建Notification。
var notification = window.webkitNotifications.createNotification("images/min1.jpg", "标题", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容");
可以对创建的notification对象添加一些属性,注册一些事件。在W3.org文档中我们可以看到一些事件onclick,onshow,onclose等,
notification.onshow = function() { alert("showing");}
notification.onclick = function(){alert("clicked");}
四、显示和关闭同样在上图中我们可以看到show()和cancel()方法,通过这两个方法我们可以显示或注销一个notification
notification.show();
notification.cancel();
五、完整的例子:通过以上分析我们可以了解到一个notification的创建到注销的过程:先检查是否支持webkitNotifications –> 获得用户允许的权限 –> 检查是否得到了权限 –> 声明用于通知功能的实例 –> 通过show方法弹出通知信息框 ->销毁notification
if(!window.webkitNotifications){
alert("您的浏览器不支持Notification桌面通知!");
}
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
var notification;
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}else {
notification = window.webkitNotifications.createNotification("images/min1.jpg", "标题", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容");
notification.onshow = function() { setTimeout('notification.cancel()', 5000); }
notification.onclick = function(){alert("clicked");}
notification.show();
}
}
结果:
分享到:
相关推荐
HTML5开启浏览器桌面通知 Web Notification,HTML5开启浏览器桌面通知 Web Notification,HTML5开启浏览器桌面通知 Web Notification,HTML5开启浏览器桌面通知 Web Notification
综上所述,"Notify_html5桌面通知"是一个利用HTML5 `Notification` API实现的浏览器桌面提醒功能,它提高了Web应用的交互性和用户体验。通过学习和实践,开发者可以将这一特性应用到自己的Web项目中,提供更加丰富的...
HTML5桌面通知(HTML5 Desktop Notifications)是现代Web开发中一个强大的特性,它允许网站在浏览器后台或用户离开页面时向用户发送提醒。这个“前端项目-HTML5Notification.zip”包含了一个实现这一功能的polyfill...
HTML5的桌面通知功能是现代Web应用程序与用户交互的重要方式之一,它使得浏览器能够在后台或用户专注于其他页面时发送提醒。这种通知不依赖于特定的网页,而是由浏览器本身管理,确保用户不会错过任何重要的消息。...
HTML5 Web Notification 桌面通知API是HTML5引入的一个重要特性,它解决了传统网页消息交互方式的局限性,如闪烁页面标题等。这一特性使得开发者能够创建类似桌面应用的通知,即使浏览器窗口最小化或被遮挡,用户也...
HTML5中的桌面通知功能是现代Web应用中一种增强用户体验的重要特性。通过`Notification` API,开发者可以在用户浏览器的桌面或移动设备上显示提醒通知,即使用户不在网站或应用的前端界面,也能接收到重要的信息。...
Node Webkit 桌面通知 Demo 是一个使用 Node Webkit 框架创建的示例应用,它展示了如何在桌面环境中实现本地通知功能。Node Webkit 是一个强大的工具,它结合了 Node.js 的服务器端 JavaScript 功能和 Chromium ...
在这篇文章中,我们将聚焦于三个关键的API扩展:应用缓存、服务端消息和桌面通知。 首先,让我们详细探讨**应用缓存**。应用缓存是HTML5离线存储的一种方式,允许开发者将静态资源(如HTML、CSS、JavaScript文件等...
一、HTML5 Notification 简介HTML5 Notification ,即桌面通知。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息...
HTML5的Web Notification桌面通知是现代网页应用中一个强大的特性,它允许网站向用户的桌面发送实时更新,即使用户没有直接与浏览器交互。这种技术极大地增强了用户体验,尤其对于那些需要及时信息推送的服务,如...
html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性。 这里有个不错的demo:html5 web notification demo 从上面这个demo中 我们就...
在HTML5中,实现桌面通知主要依赖于`Notification`对象。首先,我们需要检查当前浏览器是否支持`Notification`,可以通过`window.Notification`来判断。如果浏览器支持,我们可以继续进行后续操作;如果不支持,我们...
Notification API是HTML5中的一个重要特性,它允许网页应用向用户发送桌面级别的通知。这些通知可以在用户不浏览页面时出现,类似于操作系统级别的提醒。 - **检查权限**:在发送通知前,需要先检查浏览器是否支持...
Web Notifications API是HTML5的一部分,它使得开发者可以创建和管理跨平台的桌面通知。通过这个API,开发者可以向用户的操作系统发送定制的通知,这些通知通常包含标题、文本和图标等元素,以吸引用户的注意力。 ...
在仿Windows桌面系统中,开发者可能利用HTML5的Web通知API(Notification API)来创建类似的功能,允许程序向用户发送视觉提示。 5. **桌面分屏**:Windows系统支持多窗口并排显示,方便用户同时查看和操作多个应用...
桌面通知可以跨越浏览器窗口或标签页的限制,即使浏览器被最小化,用户仍能收到通知。在HTML5的众多新特性中,Web Notification是一大亮点,它极大地增强了网站与用户之间的交互性。 要实现Web Notification功能,...
这种桌面提示是HTML5新增的 Web Push Notifications 技术。 Web Notifications 技术使页面可以发出通知,通知将被显示在页面之外的系统层面上。能够为用户提供更好的体验,即使用户忙于其他工作时也可以收到来自页面...