js實現瀏覽器通知功能

概述

Notification API是瀏覽器的通知接口，用於在用戶的桌面（而不是網頁上）顯示通知信息，桌面電腦和手機都適用，比如通知用戶收到了一封Email。具體的實現形式由瀏覽器自行部署，對於手機來說，一般顯示在頂部的通知欄。

如果網頁代碼調用這個API，瀏覽器會詢問用戶是否接受。只有在用戶同意的情況下，通知信息才會顯示。

下面的代碼用於檢查瀏覽器是否支持這個API。

if (window.Notification) {
  // 支持
} else {
  // 不支持
}

目前，Chrome和Firefox在桌面端部署了這個API，Firefox和Blackberry在手機端部署了這個API。

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        var n = new Notification('通知標題', { body: '這里是通知內容！' }); 
    });
}

上面代碼檢查當前瀏覽器是否支持Notification對象，並且當前用戶准許使用該對象，然后調用Notification.requestPermission方法，向用戶彈出一條通知。

Notification對象的屬性和方法

Notification.permission

Notification.permission屬性，用於讀取用戶給予的權限，它是一個只讀屬性，它有三種狀態。

• default：用戶還沒有做出任何許可，因此不會彈出通知。
• granted：用戶明確同意接收通知。
• denied：用戶明確拒絕接收通知。

Notification.requestPermission()

Notification.requestPermission方法用於讓用戶做出選擇，到底是否接收通知。它的參數是一個回調函數，該函數可以接收用戶授權狀態作為參數。

Notification.requestPermission(function (status) {
      if (status === "granted") {
           var n = new Notification("Hi!");
       } else {
            alert("Hi!");
       }
});

上面代碼表示，如果用戶拒絕接收通知，可以用alert方法代替。

Notification實例對象

Notification構造函數

Notification對象作為構造函數使用時，用來生成一條通知。

var notification = new Notification(title, options);

Notification構造函數的title屬性是必須的，用來指定通知的標題，格式為字符串。options屬性是可選的，格式為一個對象，用來設定各種設置。該對象的屬性如下：

• dir：文字方向，可能的值為auto、ltr（從左到右）和rtl（從右到左），一般是繼承瀏覽器的設置。
• lang：使用的語種，比如en-US、zh-CN。
• body：通知內容，格式為字符串，用來進一步說明通知的目的。。
• tag：通知的ID，格式為字符串。一組相同tag的通知，不會同時顯示，只會在用戶關閉前一個通知后，在原位置顯示。
• icon：圖表的URL，用來顯示在通知上。

上面這些屬性，都是可讀寫的。

下面是一個生成Notification實例對象的例子。

var notification = new Notification('收到新郵件', {
  body: '您總共有3封未讀郵件。'
});

notification.title // "收到新郵件"
notification.body // "您總共有3封未讀郵件。"

實例對象的事件

Notification實例會觸發以下事件。

• show：通知顯示給用戶時觸發。
• click：用戶點擊通知時觸發。
• close：用戶關閉通知時觸發。
• error：通知出錯時觸發（大多數發生在通知無法正確顯示時）。

這些事件有對應的onshow、onclick、onclose、onerror方法，用來指定相應的回調函數。addEventListener方法也可以用來為這些事件指定回調函數。

notification.onshow = function() {
     console.log('Notification shown');
};

close方法

Notification實例的close方法用於關閉通知。

var n = new Notification("Hi!");
// 手動關閉
n.close();
// 自動關閉
n.onshow = function () { 
     setTimeout(n.close.bind(n), 5000); 
}

上面代碼說明，並不能從通知的close事件，判斷它是否為用戶手動關閉。

摘自http://m.blog.csdn.net/article/details?id=51004681

注意：

個人測試發現：該功能只有在服務器發布的頁面下才可以出效果，靜態頁面沒有任何效果也不報錯。

效果圖：