【Html5】Html5新特性Notification實現桌面消息推送（2016-05-25）

時間 2019-11-17

標籤 Html5 html5 html 特性 notification 實現桌面消息推送欄目 HTML5 简体版

原文原文鏈接

　　序：最近工做使用WorkTile，發現使用Chrome瀏覽器的時候若是有任務下發給我則會在桌面右下角提示（當前瀏覽器爲最小化模式）。感受這個東西蠻有意思的，感受能夠給用戶更好的體驗，因而乎就查詢了一下，發現是Html5的新特性。

0x01：IE內核的瀏覽器還不能夠，但在Chrome與Firefox上已經實現了此API。

0x02：代碼簡單直接看吧html

 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

相關標籤/搜索