http://www.html5rocks.com/en/tutorials/notifications/quick/?redirect_from_locale=zh

http://www.paulund.co.uk/html5-notifications

http://www.w3.org/TR/notifications/#displaying-notifications

示例：

<!DOCTYPE HTML>

<!-- http://dhtmlexamples.com/2011/01/28/creating-os-notifications-in-html5/ -->

<html>

<head>

    <title>Creating OS notifications in HTML5</title>

</head>

<body>  

    <form>

        <input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />

        <input type="button" value="Send OS notification" onclick="notify();" />

    </form>  

    <script type="text/javascript">

        const AUTO_CLOSE_DELAY_SECONDS = 5;  

        function init() {

            if (window.webkitNotifications) {

                window.webkitNotifications.requestPermission();

            }

        }  

        function notify() {

            var icon = "accept.png";

            var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";

            var body =  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";  

            if (window.webkitNotifications) {

                if (window.webkitNotifications.checkPermission() == 0) {

                    var popup = window.webkitNotifications.createNotification(icon, title, body);

                    popup.ondisplay = function(event) {

                        setTimeout(function() {

                            event.currentTarget.cancel();

                        }, AUTO_CLOSE_DELAY_SECONDS * 1000);

                    }

                    popup.show();

                } else {

                    window.webkitNotifications.requestPermission();

                    return;

                }

            }

        }

    </script>  

</body>

</html>

html5 notifications通知的更多相关文章

  1. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  2. HTML5桌面通知：notification

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

  3. Android设计和开发系列第一篇：Notifications通知(Design)

    Design篇 Notifications The notification system allows users to keep informed about relevant and timel ...

  4. HTML5桌面通知：notification api

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

  5. HTML5 桌面通知：Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...

  6. 介绍一个比较酷东西：HTML5 桌面通知（Notification API）

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

  7. html5桌面通知,notification的使用,右下角出现通知框

    1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...

  8. Notification html5 的通知api

    https://developer.mozilla.org/zh-CN/docs/Web/API/notification 使用方法 var notification = new Notificati ...

  9. Android设计和开发系列第一篇：Notifications通知(Develop—API Guides)

    Notifications IN THIS DOCUMENT Design Considerations Creating a Notification Required notification c ...

随机推荐

  1. JavaScript事件处理

    客户端javascript程序采用了异步事件驱动程序,在这种程序设计风格下,当文档,浏览器,元素,或与之相关的对象发生某些有趣的事件时,web浏览器就会产生事件.事件本身不是javascript对象. ...

  2. bzoj1633 [Usaco2007 Feb]The Cow Lexicon 牛的词典

    Description 没有几个人知道,奶牛有她们自己的字典,里面的有W (1 ≤ W ≤ 600)个词,每个词的长度不超过25,且由小写字母组成.她们在交流时,由于各种原因,用词总是不那么准确.比如 ...

  3. bzoj1637 [Usaco2007 Mar]Balanced Lineup

    Description Farmer John 决定给他的奶牛们照一张合影,他让 N (1 ≤ N ≤ 50,000) 头奶牛站成一条直线,每头牛都有它的坐标(范围: 0..1,000,000,000 ...

  4. 学生管理系统(list)

    学生管理系统:学习了一点文件指针的操作和链表操作,以前总想搞下子,刚好碰到同学要做这个,自己瞎搞了一通. 实现功能:数据添加,查找,删除,插入,修改只是在查找加几句就没写. #include < ...

  5. WebService 通用接收方法

    /** * @Title: getNetStatusRequest * @Description: TODO(2.1检查网络状态字符串) * @param: * @return: String * @ ...

  6. linux内存操作----kernel 3.5.X copy_from_user()和copy_to_user()

    前面的一篇文章中简单的描写叙述了一下内存映射的内容,http://blog.csdn.net/codectq/article/details/25658813,这篇文章作为用户把内存规划好之后,在用户 ...

  7. weblogic8.1在myeclipse中启动正常,在单独的weblogic中无法正常启动的解决方案.

    应用程序服务器weblogic8.1.5,项目在myeclipse中启动正常,在单独的服务器中启动就报错了.错误如下图: 经过观察,发现在myeclipse中设置了以下的jar包.估计是这个问题引起的 ...

  8. VisualStudio.DTE 对象可以通过检索 GetService() 方法

    DTE dte = (DTE)GetService(typeof(DTE)); string solutionDir = System.IO.Path.GetDirectoryName(dte.Sol ...

  9. MSDTC问题集

    一.链接服务器的 OLE DB 访问接口 "SQLNCLI" 无法启动分布式事务. 尊重原著作:本文转载自http://sfwxw456.blog.163.com/blog/sta ...

  10. jquery 获取自定义属性（attr 和 prop的区别）

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...