摘要：據(jù)猜測是為瀏覽器翻譯服務(wù)。通知內(nèi)容，顯示在通知標(biāo)題之下，默認(rèn)為空字符串標(biāo)記通知的類型，打上標(biāo)簽，默認(rèn)為空字符串。在最新的技術(shù)評審稿中，該參數(shù)被舍棄設(shè)置該標(biāo)志表示最終用戶將不能很容易地清除。設(shè)置該標(biāo)志，通知將為永久型通知。

網(wǎng)頁通知API。
這是2011年由谷歌技術(shù)員John Gregg提出的一項(xiàng)網(wǎng)頁通知api。

請讀者直接參考whatwg工作組對這個(gè)api的定義

Notifications API

[Constructor(DOMString title, optional NotificationOptions options),
 Exposed=(Window,Worker)]
interface Notification : EventTarget {
  static readonly attribute NotificationPermission permission;
  [Exposed=Window] static void requestPermission(optional NotificationPermissionCallback callback);

  attribute EventHandler onclick;
  attribute EventHandler onshow;
  attribute EventHandler onerror;
  attribute EventHandler onclose;

  readonly attribute DOMString title;
  readonly attribute NotificationDirection dir;
  readonly attribute DOMString lang;
  readonly attribute DOMString body;
  readonly attribute DOMString tag;
  readonly attribute USVString icon;
  readonly attribute USVString sound;
  // 目前還沒有暴露振動(dòng)屬性；見 bug 23682
  readonly attribute boolean renotify;
  readonly attribute boolean silent;
  readonly attribute boolean noscreen;
  readonly attribute boolean sticky;
  [SameObject] readonly attribute any data;

  void close();
};

dictionary NotificationOptions {
  NotificationDirection dir = "auto";
  DOMString lang = "";
  DOMString body = "";
  DOMString tag = "";
  USVString icon;
  USVString sound;
  VibratePattern vibrate;
  boolean renotify = false;
  boolean silent = false;
  boolean noscreen = false;
  boolean sticky = false;
  any data = null;
};

enum NotificationPermission {
  "default",
  "denied",
  "granted"
};

callback NotificationPermissionCallback = void (NotificationPermission permission);

enum NotificationDirection {
  "auto",
  "ltr",
  "rtl"
};

從api設(shè)計(jì)可知，該api的構(gòu)造器接受兩個(gè)參數(shù)，即通知標(biāo)題與通知參數(shù)，該對象可在window和worker上被使用

通知標(biāo)題

通知標(biāo)題即是指用戶可見的通知內(nèi)容，由容器顯示在通知窗口上

通知參數(shù)

dir

通知的方向，其可用類型為: 默認(rèn)自動(dòng)確認(rèn)， 從左及右， 從右及左。在chrome最新瀏覽器上親測無用。。

lang

標(biāo)記通知的標(biāo)題，和身體的語言類型，默認(rèn)為空字符串，若需要填寫，應(yīng)填寫一個(gè)有效的 BCP 47 語言標(biāo)記。據(jù)猜測是為瀏覽器翻譯服務(wù)。

body

通知內(nèi)容，顯示在通知標(biāo)題之下，默認(rèn)為空字符串

tag

標(biāo)記通知的類型，打上標(biāo)簽，默認(rèn)為空字符串。使用該tag的場景是： 1.多實(shí)例通知并發(fā)操作的時(shí)候，當(dāng)兩個(gè)通知同時(shí)出現(xiàn)時(shí)，同一tag只出現(xiàn)一次。2.單實(shí)例時(shí)，兩個(gè)定義了相同的tag的通知實(shí)體，會(huì)顯示最新那個(gè)。

icon

指定通知圖標(biāo)，接受一個(gè)URI資源標(biāo)識符字符串,不填或解析錯(cuò)誤時(shí)，默認(rèn)未定義

sound

指定通知聲效，同上。在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

vibrate

指定通知是否震動(dòng)，該參數(shù)接洽了新的vibrate api, 通過valid pattern驅(qū)動(dòng)，具體請點(diǎn)擊鏈接查看示例。在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

renotify

當(dāng)一個(gè)通知列表中通知被替換時(shí)，指定該通知是否再次顯示。值為true||false。在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

silent

該標(biāo)志表示不接收聲音或者振動(dòng)通知，值為true||false。在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

noscreen

設(shè)置該標(biāo)志表示設(shè)備屏幕不會(huì)被啟用，值為true||false。在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

sticky

設(shè)置該標(biāo)志表示最終用戶將不能很容易地清除 notification。設(shè)置該標(biāo)志，通知將為永久型通知。在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

data

擴(kuò)展數(shù)據(jù)，在最新的Notifications技術(shù)評審稿中，該參數(shù)被舍棄

var not = new Notification("Gebrünn Gebrünn by Paul Kalkbrenner");
// 當(dāng)點(diǎn)擊通知時(shí)
not.onclick = function () { alert("clicked") }
// 當(dāng)通知出現(xiàn)時(shí)
not.onshow = function () { alert("show") }
// 當(dāng)通知關(guān)閉時(shí)
not.onclose = function () { alert("closed") }
// 當(dāng)通知發(fā)生錯(cuò)誤時(shí)
not.onerror = function (e) { console.log(e.message) }

Notification.permission:獲取用戶當(dāng)前對通知的設(shè)置，包括default，denied， granted三個(gè)枚舉值。default相當(dāng)于禁止顯示，表示用戶沒有設(shè)置通知許可，denied表示用戶設(shè)置過不希望接受通知，同時(shí)通知是無法顯示的，granted可以顯示通知

Notification.requestPermission(ptional NotificationPermissionCallback callback)該方法接受一個(gè)回調(diào),回調(diào)帶一個(gè)參數(shù)status。注意，在最新的技術(shù)評審稿中，調(diào)用該方法是異步的，會(huì)返回一個(gè)promise對象，我們完全可以點(diǎn)個(gè)then去處理status。

在評審稿中，它首先會(huì)設(shè)置permission = status，如果status === "default"，瀏覽器會(huì)彈出一個(gè)小窗，詢問用戶對該域進(jìn)行通知設(shè)置。然后異步處理我們的callback。例子如下

function notifyMessage(message, options, callback) {
    if (Notification && Notification.permission === "granted") {
        var notification = new Notification(message, options);
        callback(null, notification);
    } else if (Notification.requestPermission) {
        Notification.requestPermission(function (status) {
            if (Notification.permission !== status) {
                Notification.permission = status;
            }
            if (status === "granted") {
                var notification = new Notification(message, options);
                callback(null, notification);
            } else {
                callback(new Error("user denied"));
            }
        });
    } else {
        callback(new Error("doesn"t support Notification API"));
    }
}

function notifyMessage(message, options, callback) {
    if (Notification && Notification.permission === "granted") {
        var notification = new Notification(message, options);
        callback(null, notification);
    } else if (Notification.requestPermission) {
        Notification
            .requestPermission()
            .then(function (status) {
                new Notification(message, options);
                callback(null, notification);
            })
            .catch(function (status) {
                callback(new Error("user denied"));
            });
    } else {
        callback(new Error("doesn"t support Notification API"));
    }
}

notification.close();直接關(guān)閉通知。