使用場景 常見的大多適用於提示用戶有新的未讀消息，一系列推送廣告/系統更新消息等......
知道了使用場景后， 接着先上一段完整代碼
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/