interface NotificationCenter {
 // Notification factory methods.
 Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception);
 optional Notification createHTMLNotification(in DOMString url) throws(Exception);
 // Permission values
 const unsigned int PERMISSION_ALLOWED = 0;
 const unsigned int PERMISSION_NOT_ALLOWED = 1;
 const unsigned int PERMISSION_DENIED = 2;
 // Permission methods
 int checkPermission();
 void requestPermission(in Function callback);
}
interface Window {
...
 attribute NotificationCenter webkitNotifications;
...
}
 

使用 Notification center 時需要用到4個方法：

• createNotification - 如果 notification 有許可權被顯示，呢麼該方法將會建立一個 notification 物件，併為其填充相關的內容。如果頁面沒有允許 notification ，那麼將丟擲一個安全異常。
• createHTMLNotification - 該方法類似於 createNotification ，若頁面有許可權顯示 notification 它會返回一個相關的物件。該方法使用了一個 URL 引數來載入要顯示的 HTML 內容。
• checkPermission - 該方法返回該頁面使用 notification 的整形許可權值。PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, 或者 PERMISSION_DENIED = 2
• requestPermission - 該方法將向用戶請求詢問顯示提示框的許可權。

檢查瀏覽器是否支援 Notification

當你準備用 notification API 做點什麼之前，你需要先檢查瀏覽器是否支援，你可以使用一下程式碼來檢查：

獲得顯示許可權

/**
 * Check if the browser supports notifications
 *
 * @return true if browser does support notifications
 */
 function browser_support_notification()
 {
        return window.webkitNotifications;
 }
 

顯示一個提醒之前你需要得到使用者的允許，獲得此許可權你需要做的就是使用 requestPermission() 方法：

顯示純文字提示框

/**
* Request notification permissions
*/
function request_permission()
{
    // 0 means we have permission to display notifications
    if (window.webkitNotifications.checkPermission() == 0) {
        window.webkitNotifications.createNotification();
        } else {
        window.webkitNotifications.requestPermission();
    }
}

建立一個顯示純文字的提示框前你需要檢查是否有許可權顯示。如果有許可權我們就能使用createNotification()方法建立一個新的 notification 了，使用 createNotification() 傳遞圖片、標題以及描述資訊3引數即可。

/**
* Create a plain text notification box
*/
function plain_text_notification(image, title, content)
{
        if (window.webkitNotifications.checkPermission() == 0) {
            return window.webkitNotifications.createNotification(image, title, content);
        }
}