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. Linux系统编程（21）——信号的产生

    1.通过终端按键产生信号 通过上一篇我们知道了SIGINT的默认处理动作是终止进程,SIGQUIT的默认处理动作是终止进程并且Core Dump,现在我们来验证一下. 首先解释什么是Core Dump ...

  2. Unix/Linux环境C编程入门教程(38) shell命令进阶演示

     1.w命令 该命令也可以查看登录当前系统的用户信息.与who命令相比,w命令的功能更强大,它不但可以显示当前有哪些用户登录到系统,还可以显示这些用户正在进行的操作,并给出更加详细和科学的统计数据 ...

  3. ios常用的几个动画代码

      #import "MianViewController.h" #import <QuartzCore/QuartzCore.h> @interface MianVi ...

  4. tomcat-maven-plugin 插件使用

    配置 在pom.xm 加入以下xml. <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId&g ...

  5. SqlBulkCopy使用介绍以及注意事项

    SqlBulkCopy,微软提供的快速插入类,针对大批量数据操作,此类效果明显有所提升,以下是微软官方解释: Microsoft SQL Server 提供一个称为 bcp 的流行的命令提示符实用工具 ...

  6. ASP.NET实现图片防盗链（转）

    使用httpHandle来实现,对图片文件的请求做专门的处理第一步:创建一个类,继承自IHttpHandler,代码如下 C# code using System; using System.Web; ...

  7. 我的美国（北美）计算机CS实习面试经验分享

    过去的一年多里,参加了一些面试,虽然面过的公司不多,但都从头一直走到尾.毕竟自己也是花了大量的时间和精力在这一场场的面试里.所以,就絮叨下自己的一些经验,希望能给在美国找实习找工作的同学们提供一点点帮 ...

  8. Letter of inquiry about employment possibilities, e-mail version

    Subject: (logical to recipient!) Inquiry about software engineering position after completion of M.S ...

  9. AjaxHelper的get和post请求的封装类

    最近在学习ajax的时候发现不断的调用get和post请求时,代码重复很多,有的公司会用自带的封装的方法,这个可以直接调用ajax的方法,但是在运用的时候我们也应该学习它是怎么封装的和一些原理性的东西 ...

  10. github Permission denied (publickey)解决办法

    想要玩玩git,参考了网友懒惰之计的一篇Blog<github:如何获取项目源代码 >,按部就班完成了所有的步骤的, 可在测试的时候,遇到了问题,总是报错”github Permissio ...