HTML5桌面通知：notification api

時間 2019-11-20

標籤 html5 html 桌面通知 notification api 欄目 HTML5 简体版

原文原文鏈接

1. 爲何須要HTML5的桌面通知

傳統的桌面通知能夠寫一個div放到頁面右下角自動彈出來，並經過輪詢等等其餘方式去獲取消息並推送給用戶。這種方式有個弊端就是：當我在使用京東進行購物的時候，我是不知道人人網有消息推送過來給個人，而必需要等我把當前頁面切到人人網才知道有消息推送了。這種方式的消息推送它是基於頁面存活的，可是咱們須要這麼一種策略：不管你在看哪一個頁面，只要有消息都應該能推送給我看到，這就是webkitNotification要解決的問題。 Notification生成的消息不依附於某個頁面，僅僅依附於瀏覽器。javascript

2. 一個桌面通知生成的正常流程

咱們先來看看一個桌面通知是如何生成的：html

檢查瀏覽器是否支持Notification

檢查瀏覽器的通知權限（是否容許通知）

若權限不夠則獲取瀏覽器的通知權限

建立消息通知

展現消息通知
NOTE: 關於第一點的說明須要作一些說明，Notification目前尚未標準化，因此目前只支持chrome19+和safari6+；網上有資料顯示Firefox26+也支持，可是我拿個人Firefox27檢測的結果是沒法支持。

3. notification api基礎說明及代碼示例

目前notification的實現有兩種：一種是以前草案中的形式：webkitNotifications對象, 另外一種就是將來標準化的形式:Notification對象。首先來講一下webkitNotifications所包含的內容：html5

3.1 webkitNotifications：

3.1.1. 靜態方法

 
         window.webkitNotifications.checkPermission() 
        
         //該方法返回0, 1, 2三個值，0表明PERMISSION_ALLOWED,即’容許’；1表明PERMISSION_NOT_ALLOWED，即不容許；2表明PERMISSION_DENIED，即拒絕 
        
         window.webkitNotifications.requestPermission() 
        
         //調用該方法將會在瀏覽器的信息欄彈出一個是否容許桌面通知的提醒，該方法只能由用戶主動事件觸發，如click 或 mouse over，也就是說你不能在document.ready裏面直接調用該方法。 
        
         window.webkitNotifications.createNotification( 
         'icon-url' 
         , 
         'title' 
         ,  
         'body' 
         ) 
        
         //調用該方法將返回一個實例化的webkitNotifications對象

PS:調用以上方法都會存在安全異常，也就是當前頁面的permission是否爲0。java

3.1.2. 實例方法

 
         notificationInstance.show() 
        
         //調用該方法將在右下角彈出一個通知窗口 
        
         notificationInstance.cancel() 
        
         //調用該方法將關閉通知窗口

3.2 Notification:

在chrome26+ 終端裏面輸入window.Notification並鍵入回車鍵，會發現這東西它也是存在的，根據某些博客的說法，這個Notification會是 webkitNotifications的標準化形態（傳說中的進化），這種方式的實現相對於webkitNotifications的實現更簡潔，更面向對象一些。 構造函數： web

 
         Notification(title, options) 
        
         //@param {String} title 要顯示的通知標題 
        
         //@param {Object} options 備選項參數，鍵值對 
        
         //option 結構以下 
        
         dictionary NotificationOptions { 
        
         NotificationDirection dir =  
         "auto" 
         ; 
        
         DOMString lang =  
         "" 
         ; 
        
         DOMString body; 
        
         DOMString tag; 
        
         DOMString icon; 
         //在實例化的時候會異步的去獲取 
        
         };

 
         //新建一個Notification實例,並根據permission爲'granted'來完成notification的顯示 
        
         var 
         notification =  
         new 
         Notification( 
         'Hello Notification' 
         ,{body: 
         "I'm an enginneer!" 
         });

3.2.1. 屬性

靜態屬性:

Notification.Permission:chrome

'default' 等同於拒絕 'denied' 意味着用戶不想要通知 'granted' 意味着用戶贊成啓用通知api

Test:在chrome的地址欄裏面輸入http://www.baidu.com, 打開console，並在裏面輸入Notification.Permission 默認返回的是'default'.瀏覽器

Notes:該屬性是隻讀的不能手動修改安全

1

2

3

//在百度的首頁打開console

Notification.Permission = 'granted'

Notification.Permission //'default'

實例屬性：

如下屬性都須要在Notification實例上才能訪問，爲只讀屬性，而且就是經過option來賦值異步

 
         Notification.dir     
         // 
        
         Notification.lang 
        
         Notification.Body    
         //通知的具體內容 
        
         Notification.tag     
         //實例化的notification的id 
        
         Notification.icon    
         //通知的縮略圖

3.2.2 方法

靜態方法

Notification.requestPermission() ``` //該方法將會詢問用戶是否容許顯示通知 ``` 該方法不能由頁面自主調用，必須由用戶主動事件觸發，仍是以百度的頁面爲例，百度的搜索框的id爲'kw'：

 
         //不經過事件觸發直接調用 
        
         Notification.requestPermission() 
        
         //頁面無反應

```Javascript //經過用戶主動事件觸發來調用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //頁面信息欄會彈出詢問用戶是否容許顯示桌面通知

```

Notes:當用戶贊成以後，再次調用該方法則無效，即該方法僅對Notification.Permission不爲'granted'的時候起做用

實例方法

 
         Notification.close()     
         //該方法容許經過代碼控制關掉notification

Notes: Notification 沒有實例方法show(),在Notification實例化的時候，瀏覽器就已經自動的去處理notification的顯示過程了。

3.3 代碼示例

如下代碼將展現如何使用webkitNotification和Notification來顯示桌面通知

3.3.1 webkitNotification

 
         document.getElementById( 
         'notifyButton' 
         ).onclick =  
         function 
         (){ 
        
         //判斷瀏覽器是否支持notification 
        
         if 
         (window.webkitNotifications){ 
        
         //判斷當前頁面是否被容許發出通知 
        
         if 
         (webkitNotifications.checkPermission==0){ 
        
         var 
         icon_url =  
         'http://www.w3.org/' 
         ; 
        
         var 
         title =  
         'Hello HTML5' 
         ; 
        
         var 
         body =  
         'I will be always here waiting for you!' 
         ; 
        
         var 
         WebkitNotification = webkitNotifications.createNotification(icon_url, title, body); 
        
         WebkitNotification.show(); 
        
         } 
         else 
         { 
        
         document.getElementById( 
         'requestbutton' 
         ).onclick =  
         function 
         () { 
        
         webkitNotifications.requestPermission(); 
        
         }; 
        
         } 
        
         } 
         else 
         alert( 
         "您的瀏覽器不支持桌面通知特性，請下載谷歌瀏覽器試用該功能" 
         ); 
        
         };

3.3.2 Notification

 
         document.getElementById( 
         'notifyButton' 
         ).onclick =  
         function 
         () { 
        
         if 
         (window.Notification){ 
        
         if 
         (Notification.Permission=== 
         'granted' 
         ){ 
        
         var 
         notification =  
         new 
         Notification( 
         'Hello Notification' 
         ,{body: 
         "I hope that all the browser will support this\                   function!" 
         }); 
        
         } 
         else 
         { 
        
         document.getElementById( 
         'requestButton' 
         ).onclick =  
         function 
         (){ 
        
         Notification.requestPermission(); 
        
         }; 
        
         }; 
        
         } 
         else 
         alert( 
         '你的瀏覽器不支持此特性，請下載谷歌瀏覽器試用該功能' 
         ); 
        
         };