桌面消息通知：HTML5 Notification

使用場景  常見的大多適用於提示用戶有新的未讀消息，一系列推送廣告/系統更新消息等......

知道了使用場景後， 接着先上一段完整代碼

 1 //註冊權限
 2 Notification.requestPermission(function (status) {
 3     // 這將使咱們能在 Chrome/Safari 中使用 Notification.permission
 4     if (Notification.permission !== status) {
 5       Notification.permission = status;
 6     }
 7 });
 8 //消息推送
 9 var n = new Notification('博客更新提示',{
10     body: '您的博客園有新文章發佈,歡迎關注哦',
11     tag: 'avenstar', //表明通知的一個識別標籤，相同tag時只會打開同一個通知窗口
12     icon: 'https://pic.cnblogs.com/avatar/819169/20171029125922.png',
13     requireInteraction: true //通知保持有效不自動關閉，默認爲false
14 })

打開Chrome瀏覽器，F12運行效果以下 (針對上述代碼，下面逐一展開說明)

請求權限 requestPermission

 Notification.requestPermission(function (status) {
    // 這將使咱們能在 Chrome/Safari 中使用 Notification.permission
    if (Notification.permission !== status) {
      Notification.permission = status;
    }
  });

檢查當前權限狀態（查看你是否已經有權限）  Notification.permission 該屬性的值將會是下列三個之一：

default 用戶還未被詢問是否受權，因此通知不會被顯示。
granted 表示以前已經詢問過用戶，而且用戶已經授予了顯示通知的權限。
denied 用戶已經明確的拒絕了顯示通知的權限。

消息通知  Notification

var n = new Notification('博客更新提示',{
    body: '您的博客園有新文章發佈,歡迎關注哦',
    tag: 'avenstar', //表明通知的一個識別標籤，相同tag時只會打開同一個通知窗口
    icon: 'https://pic.cnblogs.com/avatar/819169/20171029125922.png',
    requireInteraction: true //通知保持有效不自動關閉，默認爲false
})

資料參考

https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Using_Web_Notifications

http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/