摘要：是新增的，用于向用戶配置和顯示桌面通知。通知不自動(dòng)關(guān)閉，默認(rèn)為自動(dòng)關(guān)閉。在瀏覽器下，沒(méi)有關(guān)閉請(qǐng)求權(quán)限的選項(xiàng)，用戶必須選擇同意拒絕。

Notification是HTML5新增的API，用于向用戶配置和顯示桌面通知。上次在別的網(wǎng)站上看到別人的通知彈窗，好奇之余也想知道如何實(shí)現(xiàn)的。實(shí)際去查一下發(fā)現(xiàn)并不復(fù)雜，且可以說(shuō)比較簡(jiǎn)單，故寫(xiě)篇博客分享給大家,希望能幫你們了解這個(gè)API。

我還發(fā)了一個(gè)npm包:notification-Koro1，非常輕量簡(jiǎn)潔，覺(jué)得不錯(cuò)的話，點(diǎn)個(gè)Star吧~

以谷歌為例，一開(kāi)始需要用戶允許通知：

允許通知之后，顯示的通知長(zhǎng)這樣：

該通知是脫離瀏覽器的，即使用戶沒(méi)有停留在當(dāng)前標(biāo)簽頁(yè)，甚至最小化了瀏覽器，也會(huì)在主屏幕的右上角顯示通知，然后在一段時(shí)間后消失。

我們可以監(jiān)聽(tīng)通知的顯示，點(diǎn)擊，關(guān)閉等事件,比如點(diǎn)擊通知打開(kāi)一個(gè)頁(yè)面。

博客、前端積累文檔、公眾號(hào)、GitHub

API的具體細(xì)節(jié)，等下再說(shuō)，先試試這個(gè)API~

下面是一個(gè)簡(jiǎn)單的栗子，大家可以先在各個(gè)網(wǎng)站的控制臺(tái)里面運(yùn)行查看Notification的效果：

var options = {
  dir: "auto", // 文字方向
  body: "通知：OBKoro1評(píng)論了你的朋友圈", // 通知主體
  requireInteraction: true, // 不自動(dòng)關(guān)閉通知
  // 通知圖標(biāo) 
  icon: "https://upload-images.jianshu.io/upload_images/5245297-818e624b75271127.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
};
notifyMe("這是通知的標(biāo)題", options);
function notifyMe(title, options) {
  // 先檢查瀏覽器是否支持
  if (!window.Notification) {
    console.log("瀏覽器不支持通知");
  } else {
    // 檢查用戶曾經(jīng)是否同意接受通知
    if (Notification.permission === "granted") {
      var notification = new Notification(title, options); // 顯示通知
    } else if (Notification.permission === "default") {
      // 用戶還未選擇，可以詢問(wèn)用戶是否同意發(fā)送通知
      Notification.requestPermission().then(permission => {
        if (permission === "granted") {
          console.log("用戶同意授權(quán)");
          var notification = new Notification(title, options); // 顯示通知
        } else if (permission === "default") {
          console.warn("用戶關(guān)閉授權(quán) 未刷新頁(yè)面之前 可以再次請(qǐng)求授權(quán)");
        } else {
          // denied
          console.log("用戶拒絕授權(quán) 不能顯示通知");
        }
      });
    } else {
      // denied 用戶拒絕
      console.log("用戶曾經(jīng)拒絕顯示通知");
    }
  }
}

MDN：目前Notification除了IE瀏覽器不支持外, 其他瀏覽器都已支持桌面通知，移動(dòng)端瀏覽器基本都未支持。

因?yàn)榧嫒菪詥?wèn)題，所以在使用Notification之前，我們需要查看瀏覽器是否支持Notification這個(gè)API：

if(window.Notification){
  // 桌面通知的邏輯
}

為了避免網(wǎng)站濫用通知擾民，在向用戶顯示通知之前，需要經(jīng)過(guò)用戶同意。

Notification.permission 用于表明當(dāng)前通知顯示的授權(quán)狀態(tài),它有三個(gè)值：

default : 默認(rèn)值，用戶還未選擇

granted : 用戶允許該網(wǎng)站發(fā)送通知

denied : 用戶拒絕該網(wǎng)站發(fā)送通知

檢測(cè)瀏覽器是否支持Notification之后，需要檢測(cè)一下用戶通知權(quán)限。

  if (Notification.permission === "granted") {
    console.log("用戶曾經(jīng)同意授權(quán)");
     // 隨時(shí)可以顯示通知
  } else if (Notification.permission === "default") {
    console.log("用戶還未選擇同意/拒絕");
    // 下一步請(qǐng)求用戶授權(quán)
  } else {
    console.log("用戶曾經(jīng)拒絕授權(quán) 不能顯示通知");
  }

當(dāng)Notification.permission為default的時(shí)候，我們需要使用Notification.requestPermission()來(lái)請(qǐng)求用戶權(quán)限。

Notification.requestPermission()基于promise語(yǔ)法，then的回調(diào)函數(shù)參數(shù)是用戶權(quán)限的狀態(tài)Notification.permission的值。

Notification.requestPermission().then(permission => {
  if (permission === "granted") {
    console.log("用戶同意授權(quán)");
     // 隨時(shí)可以顯示通知
  } else if (permission === "default") {
    console.log("用戶關(guān)閉授權(quán) 可以再次請(qǐng)求授權(quán)");
  } else {
    console.log("用戶拒絕授權(quán) 不能顯示通知");
  }
});
// 老版本使用的是回調(diào)函數(shù)機(jī)制：Notification.requestPermission(callback); 參數(shù)一樣

當(dāng)Notification.permission為granted 時(shí)，請(qǐng)求到用戶權(quán)限之后，不必立即發(fā)送通知，可以在任意時(shí)刻，以任意形式來(lái)發(fā)送通知。

const options = {}; // 傳空配置
const title = "這里是標(biāo)題";
const notification = new Notification(title, options) // 顯示通知

上面這段代碼就可以顯示一個(gè)簡(jiǎn)單的通知了，只要用戶允許你彈窗。

title：通知的標(biāo)題

options：通知的設(shè)置選項(xiàng)（可選）。

body：字符串。通知的body內(nèi)容。

tag：代表通知的一個(gè)識(shí)別標(biāo)簽，相同tag時(shí)只會(huì)打開(kāi)一個(gè)通知窗口。

icon：字符串。要在通知中顯示的圖標(biāo)的URL。

data：想要和通知關(guān)聯(lián)的數(shù)據(jù),可以在new Notification返回的實(shí)例中找到。

renotify: 布爾值。相同tag，新通知出現(xiàn)的時(shí)候是否替換之前的(開(kāi)啟此項(xiàng)，tag必須設(shè)置)。

requireInteraction：布爾值。通知不自動(dòng)關(guān)閉，默認(rèn)為false(自動(dòng)關(guān)閉)。

還有一些不太重要的配置可以看張?chǎng)涡窭蠋煹牟┛秃蚆DN的介紹

requireInteraction: 保持通知不自動(dòng)關(guān)閉

默認(rèn)值為false，通知會(huì)在三四秒之后自動(dòng)關(guān)閉。

當(dāng)設(shè)置為true,并且當(dāng)有超過(guò)兩個(gè)通知(new Notification(title, options))時(shí)，會(huì)出現(xiàn)如下圖的通知疊加狀態(tài)。

這種情況顯然，我們只能默認(rèn)操作最后一個(gè)通知，除非你把每個(gè)通知返回的實(shí)例都保存下來(lái)。

我發(fā)布的npm包：notification-koro1，可以自定義一定的時(shí)間間隔自動(dòng)關(guān)閉不自動(dòng)關(guān)閉的通知，也可以一次性關(guān)閉所有通知

PS：如果沒(méi)有觸發(fā)疊加，很可能是因?yàn)槟銉纱瓮ㄖ膖ag配置項(xiàng)是相同的(相同tag只能出現(xiàn)一個(gè)彈窗)。

PS: safari下不支持該選項(xiàng),默認(rèn)自動(dòng)關(guān)閉

renotify：相同

默認(rèn)值為false，chorme下相同tag的通知不替換，還是老的通知

設(shè)置為true, 兩個(gè)相同tag的通知，新通知替換之前舊的通知。

注意：使用renotify，必須要同時(shí)設(shè)置tag選項(xiàng)，否則將會(huì)報(bào)錯(cuò)。

PS： safari下不支持該選項(xiàng)，默認(rèn)兩個(gè)相同tag的通知，新通知替換之前舊的通知。

生成通知，會(huì)返回一個(gè)實(shí)例，如下：

const instanceNotification = new Notification(title, options)

instanceNotification就是當(dāng)前通知的實(shí)例，在該實(shí)例上，我們可以查詢?cè)撏ㄖ呐渲茫O(jiān)聽(tīng)事件，調(diào)用實(shí)例方法。

下文都以instanceNotification指代通知返回的實(shí)例。

在通知實(shí)例上可以讀取到設(shè)置通知時(shí)的所有配置，比如：

通知標(biāo)題：instanceNotification. title、通知內(nèi)容：instanceNotification. body 、通知圖標(biāo)：instanceNotification. icon等。

PS： 這些屬性都是只讀的，不能刪除，不能修改，不能遍歷。

我們可以使用通知的實(shí)例來(lái)監(jiān)聽(tīng)通知的事件：

click: 用戶點(diǎn)擊通知時(shí)被觸發(fā)

show: 通知顯示的時(shí)候被觸發(fā)

error: 通知遇到錯(cuò)誤時(shí)被觸發(fā)

close: 用戶關(guān)閉通知時(shí)被觸發(fā)

instanceNotification.onclick = e => {
  // do something 可以是：打開(kāi)網(wǎng)址，發(fā)請(qǐng)求，關(guān)閉通知等
}

注意：最好是一發(fā)出通知就立即監(jiān)聽(tīng)事件，否則有些事件可能一開(kāi)始沒(méi)被觸發(fā)或永遠(yuǎn)不會(huì)觸發(fā)。

例如：用定時(shí)器5秒后才監(jiān)聽(tīng)通知的點(diǎn)擊和顯示事件，則永遠(yuǎn)不會(huì)觸發(fā)通知顯示的回調(diào)，點(diǎn)擊事件在5秒后才可以正常起作用但會(huì)錯(cuò)誤五秒之前用戶的點(diǎn)擊。

instanceNotification.close()

沒(méi)有設(shè)置不自動(dòng)關(guān)閉的話，chrome通知將會(huì)在4.5秒左右自動(dòng)關(guān)閉通知，safari則是5秒鐘(無(wú)法設(shè)置不自動(dòng)關(guān)閉)。

notification沒(méi)有定時(shí)控制通知多久后消失的功能，當(dāng)出現(xiàn)多個(gè)通知，也無(wú)法統(tǒng)一關(guān)閉。

這兩個(gè)問(wèn)題，在我發(fā)布的NPM包：notification-koro1中，都解決掉了，并提供更清晰的回調(diào)

即時(shí)通訊軟件(郵件、聊天室)

體育賽事結(jié)果彩票/抽獎(jiǎng)結(jié)果

新聞網(wǎng)站重大新聞通知

網(wǎng)站的重大更新，重大新聞等。

這里是一些API/瀏覽器細(xì)節(jié)，以及可能會(huì)遇到的問(wèn)題，可以先不看，等真正遇到了，回頭再來(lái)看。

一旦用戶禁止網(wǎng)站顯示通知，網(wǎng)站就不能再請(qǐng)求用戶授權(quán)顯示通知，需要用戶去設(shè)置中更改。

chrome瀏覽器的通知設(shè)置位置：設(shè)置>高級(jí)>內(nèi)容設(shè)置>通知

saafari瀏覽器：偏好設(shè)置>網(wǎng)站>通知>找到網(wǎng)站>修改權(quán)限/恢復(fù)默認(rèn)

在chorme瀏覽器中：當(dāng)用戶關(guān)閉請(qǐng)求權(quán)限的彈窗(右上角的叉叉)，頁(yè)面還沒(méi)刷新，我們可以再次向用戶請(qǐng)求權(quán)限。頁(yè)面刷新過(guò)后，瀏覽器默認(rèn)用戶拒絕。

在safari瀏覽器下，沒(méi)有關(guān)閉請(qǐng)求權(quán)限的選項(xiàng)，用戶必須選擇同意/拒絕。

可能是網(wǎng)站進(jìn)行了同源限制(比如github)，不是域名下面的圖片，會(huì)報(bào)錯(cuò)，不能調(diào)用。

tag相同的通知，同時(shí)只能出現(xiàn)一個(gè)，老通知是否會(huì)被覆蓋取決于：renotify配置和瀏覽器。

chrome下：當(dāng)通知關(guān)閉之后，上次出現(xiàn)過(guò)的tag在一段時(shí)間內(nèi)，不能再出現(xiàn)，比如刷新頁(yè)面再請(qǐng)求相同tag的通知。（在safari下正常出現(xiàn)）

在safari下面，同一個(gè)網(wǎng)站(比如谷歌)，同樣的代碼，chorme可以正常顯示icon，safari卻沒(méi)有icon，也沒(méi)有報(bào)錯(cuò)。

谷歌之后發(fā)現(xiàn),在stack overflow里面看到safari只支持body和tag選項(xiàng),并不支持icon選項(xiàng)。

在safari和chrome下短時(shí)間內(nèi)連續(xù)觸發(fā)通知(不設(shè)tag，不設(shè)requireInteraction)，會(huì)出現(xiàn)如下表現(xiàn)：

這個(gè)表現(xiàn)，通知沒(méi)有icon、標(biāo)題、內(nèi)容，就顯得沒(méi)有意義了，瀏覽器以這種形式，限制開(kāi)發(fā)者不要頻繁打擾用戶。

試一下notification-Koro1啦, 持續(xù)維護(hù)，簡(jiǎn)單方便~

本文寫(xiě)的比較細(xì)，可以先mark一下，然后以后真正用到這個(gè)API了，可以先通過(guò)文中的栗子，然后再查找對(duì)應(yīng)的內(nèi)容。

還有就是注意瀏覽器間的差異，我自己就試了chrome和safari，然后這兩個(gè)瀏覽器在實(shí)現(xiàn)細(xì)節(jié)上有很多不一樣的地方，開(kāi)發(fā)的時(shí)候注意一下。

博客、前端積累文檔、公眾號(hào)、GitHub

參考資料：

notification-Koro1

簡(jiǎn)單了解HTML5中的Web Notification桌面通知

Notification MDN

HTML5 桌面通知：Notification API