【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)

  序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式)。感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下,发现是Html5的新特性。

0x01:IE内核的浏览器还不可以,但在Chrome与Firefox上已经实现了此API。

0x02:代码简单直接看吧

 1 <!DOCTYPE html>
 2
 3         <html xmlns="http://www.w3.org/1999/xhtml">
 4         <head>
 5             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6             <title>Html5 桌面消息推送</title>
 7         </head>
 8         <body>
 9             <input type="button" id="btn_Send" value="发送桌面消息" />
10             <input type="button" id="btn_Close" value="关闭桌面消息" />
11             <script src="Scripts/jquery-1.7.1.min.js"></script>
12             <script src="Scripts/notification.js"></script>
13         </body>
14         </html>

notification.html

 1 var notif;  // 消息对象
 2         var i = 0;
 3         $(document).ready(function () {
 4             /* 注册按钮单击事件 */
 5             $(‘#btn_Send‘).bind(‘click‘, function () {
 6                 if (window.Notification) {  // 判断浏览器是否支持Notification特性,Chrome与Firefox支持,IE内核暂不支持
 7                     if (Notification.permission == ‘granted‘) { // 判断浏览器是否允许此站点发送桌面消息;granted为允许
 8                         notif = new Notification(‘Clown:‘, {
 9                             body: ‘呆子、在吗?‘,
10                             icon: ‘http://taekwondoshow.com/Images/my_1.jpg‘,
11                             tag: ++i    // ID,如果ID重复则前者会被覆盖,如果ID不重复则一直叠加显示。PS:Chrome最多同时显示3条,Firefox则没有限制。。。
12                         });
13
14                         notif.onclose = function () {   // 当Notification被关闭时触发
15                             alert(‘消息被关闭了‘);
16                         };
17                         notif.onclick = function () {   // 当Notification被单击时触发
18                             alert(‘消息被单击了‘);
19                         }
20                     } else {
21                         Notification.requestPermission();
22                     }
23                 } else {
24                     alert(‘当前浏览器不支持Notification特性!‘);
25                 }
26             });
27             $(‘#btn_Close‘).bind(‘click‘, function () {
28                 if (notif) {
29                     notif.close();
30                 }
31             });
32         });

notification.js

时间: 2024-10-12 20:21:25

【Html5】Html5新特性Notification实现桌面消息推送(2016-05-25)的相关文章

Notification web 桌面消息推送

var NotificationHandler = { isNotificationSupported: 'Notification' in window, isPermissionGranted: function () { return Notification.permission === 'granted'; }, requestPermission: function () { if (!this.isNotificationSupported) { console.log('当前浏览

APNS消息推送实现

转自:http://blog.csdn.net/biaobiaoqi/article/details/8058503 一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务端[消息的发起者]): 2. APNS:Apple Push Notification Service[苹果消息推送服务器]: 3. iPhone:用来接

iOS消息推送原理

推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务端[消息的发起者]): 2.APNS:Apple Push Notification Service[苹果消息推送服务器]: 3.iPhone:用来接收APNS下发下来的消息: 4.Client App:IOS设备上的应用程序,用来接收iphone传递APNS下发的消息到制定的一个客户端 app[消息的最终响应者]: 上图

IOS 消息推送原理及实现总结

一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1-1 1.              Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务端[消息的发起者]): 2.              APNS:Apple Push Notification Service[苹果消息推送服务器]: 3.              iPhone:用来接收APNS下发下来的消息: 4.

iOS消息推送原理和实现总结

一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图:1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务端[消息的发起者]):2. APNS:Apple Push Notification Service[苹果消息推送服务器]:3. iPhone:用来接收APNS下发下来的消息:4. Client App:IOS设备上的应用程序,用来接收iphone传递APNS下发的消息到制定的一

HTML5的新特性和优缺点

HTML5的新特性 1. 语义特性(Class:Semantic) HTML5赋予网页更好的意义和结构.更加丰富的标签将随着对RDFa的微数据与微格式等方面的支 持,构建对程序.对用户都更有价值的数据驱动的Web. 2. 本地存储特性(Class: OFFLINE & STORAGE) 基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益 于HTML5 APP Cache,以及本地存储功能.Indexed DB(html5本地存储最重要 的技术之一)和API说明文档. 3

HTML5 基本新特性总概

html5 什么是html5:html5是下一代的HTML,将成为html.xhtml以及HTML DOM的新标准. 参考: HTML5的十大新特性 前端面试必备之html5的新特性 HTML5 1.语义化元素 1.1结构元素 标签 描述 article 表示与上下文不相关的独立内容区域 aside 定义页面的侧边栏区域 header 定义页面头部区域 hgroup 用于对页面中一个区域或整个页面的标题进行组合 footer 定义页面的底部区域 section 定义文档中的节段 nav 定义页面

Android (Notification)消息推送机制

从网上查询资料学习Android消息推送机制,效果图如下: 1.首先是布局文件代码 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"

PWA之消息推送——Notification

原文 简书原文:https://www.jianshu.com/p/69042b92cae1 大纲 1.推送通知的概念 2.消息推送的知识点 3.实例 1.推送通知的概念 大部分现代 Web 应用都需要定期更新和与用户沟通的能力.比如社交媒体.邮件和应用通知都很不错,但并不总是能够吸引用户的注意,尤其是当他们离开网站的时候. 这正是推送通知出现的契机.它们是出现在你设备上的有用通知,提示可能对你有用的相关信息.你可以简单地滑动或点击按钮来关闭它们,或者可以点击它们,并立即指向具有相关信息的网页.