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. 线程池 异步I/O线程 <第三篇>

    在学习异步之前先来说说异步的好处,例如对于不需要CPU参数的输入输出操作,可以将实际的处理步骤分为以下三步: 启动处理: 实际的处理,此时不需要CPU参数: 任务完成后的处理: 以上步骤如果仅仅使用一 ...

  2. javascript全局对象

    一.Array 二.Boolean 三.Date 四.Error 五.EvalError 六.Function 七.JSON 八.Math 九.Number 十.Object 十一.RangeErro ...

  3. VS2010下WPF开发ARCGIS ENGINE 10的带Ribbon控件项目

    原文 http://blog.sina.com.cn/s/blog_47522f7f0100nq5t.html 题目好长,但是集目前最新的工具于一身..VS是最新的2010版,不过用的是.net3.5 ...

  4. 国际化标签 <fmt:bundle>&<fmt:message>的使用

    国际化标签 <fmt:bundle>&<fmt:message>的使用 Message.properties文件: name=www.gis520.com #info= ...

  5. Linux系统编程（22）——响应信号

    进程对信号的响应 进程可以通过三种方式来响应一个信号: 1.忽略信号,即对信号不做任何处理,其中,有两个信号不能忽略:SIGKILL及SIGSTOP: 2.捕捉信号.定义信号处理函数,当信号发生时,执 ...

  6. Kth Largest Element in an Array 解答

    Question Find the kth largest element in an unsorted array. Note that it is the kth largest element ...

  7. UVA 11111-Generalized Matrioshkas(栈）

    题意:有很多层盒子,盒子里面再套盒子,一个盒子可能套多个独立的子盒子,但子盒子的总体积必须小于该盒子,否则不合法,输入给一行数,负数代表左边,正数代表右边,大小表示其体积,如-2,-1,1,2则表示体 ...

  8. tc令牌桶限速心得

    一.实验拓扑与实验现象 实验拓扑如图所示,在①号机上发送数据,③号机上接受数据,同时在④号机的eth1与eth2网口限制速率为115200kbps,命令如下 tc qdisc add dev eth1 ...

  9. SQLServer 2000 Driver for JDBC][SQLServer]传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确解决方法

    问题:[SQLServer 2000 Driver for JDBC][SQLServer]传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确.参数 1 (""): ...

  10. 【转】android 物理按键

    关键词:android   按键  矩阵按键 AD按键  平台信息: 内核:linux2.6/linux3.0 系统:android/android4.0 平台:S5PV310(samsung exy ...