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. CSS3之背景色渐变

    在css2时代,页面背景色渐变,按钮背景渐变效果主要是通过图片实现,css3中可通过 gradient 实现背景色渐变,图片作为一种资源,每次在页面加载时都要从服务器下载,这样如果页面很大需要渐变的效 ...

  2. Ubuntu14.04LST安装weblogic11g

    1:下载链接http://download.oracle.com/otn/nt/middleware/11g/wls/1036/wls1036_generic.jar 2:进行安装(前提已经安装好JD ...

  3. 激活前一个程序（注册全局消息，使用Mutex探测，如果已经占用就广播消息通知第一个程序，然后第一个程序做出响应）

    unit MultInst; interface const MI_QUERYWINDOWHANDLE = ; MI_RESPONDWINDOWHANDLE = ; MI_ERROR_NONE = ; ...

  4. win7 奇怪的temp用户

    在C:\Users\TEMP 有个temp用户,win+r打开的也是 C:\Users\TEMP>,而不是C:\User\Administrator. 以下文章转自: http://hi.bai ...

  5. Jquery EasyUI修改行背景的两种方式

    1.数据加载完成不请求后台的做法 方式一: //更改表格行背景 function changeLineStyle(index){ var rows=$("#alertGird"). ...

  6. C语言调用库函数实现生产者消费者问题

    #include<stdio.h> #include<stdlib.h> #include<semaphore.h> #include<pthread.h&g ...

  7. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  8. CDH 2、Cloudera Manager的安装

    1.Cloudera Manager • Cloudera Manager是一个管理CDH的端到端的应用. • 作用: – 管理 – 监控 – 诊断 – 集成 • 架构 • Server – 管理控制 ...

  9. 蚂蚁的难题(二)首尾相连数组的最大子数组和（DP）

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...

  10. 巧用DISPLAY_AWR函数与dba_hist_sqlstat结合查询SQL语句在指定节点指定时间范围内的历史执行计划

    1.问题        通过调用dbms_xplan包中DISPLAY_AWR函数(DBMS_XPLAN.DISPLAY_AWR)可以从AWR数据中查看到SQL语句的历史执行计划,但是,DISPLAY ...