先看效果:

image.png

這是利用html5桌面通知Notification API實現(xiàn)的，先看看代碼，再分析Notification。

// 桌面通知
    (() => {
      // 請求權(quán)限
      Notification.requestPermission().then(function(permission) {
          if(permission === 'granted'){
              console.log('用戶允許通知了');
          }else if(permission === 'denied'){
              console.log('用戶拒絕通知了');
          }
      });

      // 推送通知
      let n = new Notification('歡迎瀏覽',{
          body: '點擊獲取更多福利',
          tag: 'geekjc',
          icon: 'https://geekjc-img.geekjc.com/chudian01.jpg',
          requireInteraction: true,
          data: {
            url: 'https://www.geekjc.com/apdl'
          }
      })

      // 定時關(guān)閉通知
      setTimeout(() => {
        n.close()
      },10000)

      // 點擊
      n.onclick = () => {
          window.open(n.data.url, '_blank');      // 打開網(wǎng)址
          n.close();                              // 并且關(guān)閉通知
      }
    })()

Notification API 是 HTML5 新增的桌面通知 API，用于向用戶顯示通知信息。該通知是脫離瀏覽器的，即使用戶沒有停留在當前標簽頁，甚至最小化了瀏覽器，該通知信息也一樣會置頂顯示出來。

1. 用戶權(quán)限

想要向用戶顯示通知消息，需要獲取用戶權(quán)限，而相同的域名只需要獲取一次權(quán)限。只有用戶允許的權(quán)限下，Notification 才能起到作用，避免某些網(wǎng)站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的？

Notification.permission 該屬性用于表明當前通知顯示的授權(quán)狀態(tài)，可能的值包括：

• default ：不知道用戶的選擇，默認。
• granted ：用戶允許。
• denied ：用戶拒絕。

if(Notification.permission === 'granted'){
    console.log('用戶允許通知');
}else if(Notification.permission === 'denied'){
    console.log('用戶拒絕通知');
}else{
    console.log('用戶還沒選擇，去向用戶申請權(quán)限吧');
}

2. 請求權(quán)限

當用戶還沒選擇的時候，我們需要向用戶去請求權(quán)限。Notification 對象提供了 requestPermission() 方法請求用戶當前來源的權(quán)限以顯示通知。

以前基于回調(diào)的語法已經(jīng)棄用（當然在現(xiàn)在的瀏覽器中還是能用的），最新的規(guī)范已將此方法更新為基于 promise 的語法：

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用戶允許通知');
    }else if(permission === 'denied'){
        console.log('用戶拒絕通知');
    }
});

3. 推送通知

獲取用戶授權(quán)之后，就可以推送通知了。

var notification = new Notification(title, options)

參數(shù)如下：

• title：通知的標題
• options：通知的設(shè)置選項（可選）。
  • body：通知的內(nèi)容。
  • tag：代表通知的一個識別標簽，相同tag時只會打開同一個通知窗口。
  • icon：要在通知中顯示的圖標的URL。
  • image：要在通知中顯示的圖像的URL。
  • data：想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)。
  • requireInteraction：通知保持有效不自動關(guān)閉，默認為false。
    還有一些其他的參數(shù)，因為用不了或者沒什么用這里就沒必要說了。

 let n = new Notification('歡迎瀏覽',{
          body: '點擊獲取更多福利',
          tag: 'geekjc',
          icon: 'https://geekjc-img.geekjc.com/chudian01.jpg',
          requireInteraction: true,
          data: {
            url: 'https://www.geekjc.com/apdl'
          }
      })

4. 關(guān)閉通知

從上面的參數(shù)可以看出，并沒有一個參數(shù)用來配置顯示時長的。我想要它 10s 后自動關(guān)閉的話，這時可以調(diào)用 close() 方法來關(guān)閉通知。

// 定時關(guān)閉通知
      setTimeout(() => {
        n.close()
      },10000)

5. 事件

Notification 接口的 onclick屬性指定一個事件偵聽器來接收 click 事件。當點擊通知窗口時會觸發(fā)相應(yīng)事件，比如打開一個網(wǎng)址，引導用戶回到自己的網(wǎng)站去。

// 點擊
      n.onclick = () => {
          window.open(n.data.url, '_blank');      // 打開網(wǎng)址
          n.close();                              // 并且關(guān)閉通知
      }

6. 應(yīng)用場景

前面說那么多，其實就是為了用。那么到底哪些地方可以用到呢？

現(xiàn)在網(wǎng)站的消息提醒，大多數(shù)都是在消息中心顯示個消息數(shù)量，然后發(fā)郵件告訴用戶，這流程完全沒有錯。不過像我這種用戶，覺得別人點個贊，收藏一下都要發(fā)個郵件提醒我，老是要去刪郵件（強迫癥），我是覺得挺煩的甚至關(guān)閉了郵件提醒。

當然這里并不是說要用 Notification，畢竟它和郵件的功能完全不一樣。

我覺得比較適合的是新聞網(wǎng)站。用戶瀏覽新聞時，可以推送給用戶實時新聞。以騰訊體育為例，它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js，有興趣可以看看別人是怎么成熟的使用的。

一進入頁面，就獲取授權(quán)，同時自己頁面有個浮動框提示你允許授權(quán)。如果允許之后，就開始給你推送通知了。不過它在關(guān)閉標簽卡的時候，通知也會被關(guān)閉，那是因為監(jiān)聽了頁面 beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();
}
if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);

7. 兼容

說到兼容，自然是倒下一大片，而且各瀏覽器的表現(xiàn)也會有點差異。移動端的幾乎全倒，PC端的還好大多都能支持，除了IE。所以使用前，需要先檢查一下瀏覽器是否支持 Notification。

原文地址