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. SqlDataReader类

    一.常用属性 名称 说明 Depth 获取一个值,用于指示当前行的嵌套深度.  FieldCount 获取当前行中的列数. HasRows 获取一个值,该值指示 SqlDataReader 是否有行. ...

  2. scheme递归

    主要参考: http://www.shido.info/lisp/scheme7_e.html Function fact that calculates factorials. (define (f ...

  3. mongoDB windows reinstall add auth

    Mongodb默认启动是不带认证,也没有账号,只要能连接上服务就可以对数据库进行各种操作,这样可不行.现在,我们得一步步开启使用用户和认证. 第一步,我们得定位到mongodb的安装目录.我本机的是C ...

  4. 数据连接池——JNDI

    数据库连接有很多中方式,JDBC数据库的连接方式,前边我们已经介绍过了,而开发中我们经常使用的是DataBaseConnectionPool(数据库连接池,DBCP).数据库连接池到底是什么?它比jd ...

  5. iOS 10 的一些变化

    原文链接:http://www.jianshu.com/p/9756992a35ca

  6. js埋点（转载）

    页面埋点的作用,其实就是用于流量分析.而流量的意思,包含了很多:页面浏览数(PV).独立访问者数量(UV).IP.页面停留时间.页面操作时间.页面访问次数.按钮点击次数.文件下载次数等.而流量分析又有 ...

  7. 树的直径 poj 2631

    树的直径:从随意一点出发,BFS找到最远的距离,然后在从该点出发BFS找到最远的距离 #include <iostream> #include <algorithm> #inc ...

  8. 【筛素数表证明】【O[n]】

    void get_prime() { int cnt = 0; for (int i = 2; i < N; i++) { if (!tag[i]) p[cnt++] = i; for (int ...

  9. Oozie — What Why and How

    Oozie是什么? Oozie最初是Yahoo!为Hadoop开发的一个工作流调度器,一个工作流有多个Job组成.它允许用户提交由多个Job组成的工作流配置文件,这些Job既可以顺序执行,也可以并行执 ...

  10. Android使用webService

    在android中使用webservice,首先要导入Android webservice支持包 ksoap2-android-assembly-3.3.0-jar-with-dependencies ...