H5 notification瀏覽器桌面通知

Notification是HTML5新增的API，用於向用戶配置和顯示桌面通知。上次在別的網站上看到別人的通知彈窗，好奇之餘也想知道如何實現的。實際去查一下發現並不複雜，且能夠說比較簡單，故寫篇博客分享給你們,但願能幫大家瞭解這個API。

npm包：

我還發了一個npm包:notification-Koro1，很是輕量簡潔，以爲不錯的話，點個Star吧~

chrome下Notification的表現：

1. 以谷歌爲例，一開始須要用戶容許通知：

 

 

2. 容許通知以後，顯示的通知長這樣：

 

 

Notification特性

1. 該通知是脫離瀏覽器的，即便用戶沒有停留在當前標籤頁，甚至最小化了瀏覽器，也會在主屏幕的右上角顯示通知，而後在一段時間後消失。

2. 咱們能夠監聽通知的顯示，點擊，關閉等事件,好比點擊通知打開一個頁面。

博客、前端積累文檔、公衆號、GitHub

栗子：去各個網站裏面的控制檯去運行

API的具體細節，等下再說，先試試這個API~

下面是一個簡單的栗子，你們能夠先在各個網站的控制檯裏面運行查看Notification的效果：

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

---

瀏覽器支持：

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

由於兼容性問題，因此在使用Notification以前，咱們須要查看瀏覽器是否支持Notification這個API：

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

通知權限：

爲了不網站濫用通知擾民，在向用戶顯示通知以前，須要通過用戶贊成。

Notification.permission 用於代表當前通知顯示的受權狀態,它有三個值：

1. default: 默認值，用戶還未選擇
2. granted: 用戶容許該網站發送通知
3. denied: 用戶拒絕該網站發送通知

檢測權限：

檢測瀏覽器是否支持Notification以後，須要檢測一下用戶通知權限。

if (Notification.permission === 'granted') { console.log('用戶曾經贊成受權'); // 隨時能夠顯示通知 } else if (Notification.permission === 'default') { console.log('用戶還未選擇贊成/拒絕'); // 下一步請求用戶受權 } else { console.log('用戶曾經拒絕受權 不能顯示通知'); } 複製代碼

請求權限

當Notification.permission爲default的時候，咱們須要使用Notification.requestPermission()來請求用戶權限。

Notification.requestPermission()基於promise語法，then的回調函數參數是用戶權限的狀態Notification.permission的值。

Notification.requestPermission().then(permission => { if (permission === 'granted') { console.log('用戶贊成受權'); // 隨時能夠顯示通知 } else if (permission === 'default') { console.log('用戶關閉受權 能夠再次請求受權'); } else { console.log('用戶拒絕受權 不能顯示通知'); } }); // 老版本使用的是回調函數機制：Notification.requestPermission(callback); 參數同樣 複製代碼

推送通知

當Notification.permission爲granted時，請求到用戶權限以後，沒必要當即發送通知，能夠在任意時刻，以任意形式來發送通知。

const options = {}; // 傳空配置 const title = '這裏是標題'; const notification = new Notification(title, options) // 顯示通知 複製代碼

上面這段代碼就能夠顯示一個簡單的通知了，只要用戶容許你彈窗。

Notification的參數：

• title：通知的標題
• options：通知的設置選項（可選）。
  • body：字符串。通知的body內容。
  • tag：表明通知的一個識別標籤，相同tag時只會打開一個通知窗口。
  • icon：字符串。要在通知中顯示的圖標的URL。
  • data：想要和通知關聯的數據,能夠在new Notification返回的實例中找到。
  • renotify: 布爾值。相同tag，新通知出現的時候是否替換以前的(開啓此項，tag必須設置)。
  • requireInteraction：布爾值。通知不自動關閉，默認爲false(自動關閉)。
  • 還有一些不過重要的配置能夠看張鑫旭老師的博客和MDN的介紹

requireInteraction: 保持通知不自動關閉

默認值爲false，通知會在三四秒以後自動關閉。

當設置爲true,而且當有超過兩個通知(new Notification(title, options))時，會出現以下圖的通知疊加狀態。

 

 

這種狀況顯然，咱們只能默認操做最後一個通知，除非你把每一個通知返回的實例都保存下來。

我發佈的npm包：notification-koro1，能夠自定義必定的時間間隔自動關閉不自動關閉的通知，也能夠一次性關閉全部通知

PS：若是沒有觸發疊加，極可能是由於你兩次通知的tag配置項是相同的(相同tag只能出現一個彈窗)。

PS: safari下不支持該選項,默認自動關閉

renotify：相同

默認值爲false，chorme下相同tag的通知不替換，仍是老的通知

設置爲true, 兩個相同tag的通知，新通知替換以前舊的通知。

注意：使用renotify，必需要同時設置tag選項，不然將會報錯。

PS： safari下不支持該選項，默認兩個相同tag的通知，新通知替換以前舊的通知。

Notification的實例：

生成通知，會返回一個實例，以下：

const instanceNotification = new Notification(title, options) 複製代碼

instanceNotification就是當前通知的實例，在該實例上，咱們能夠查詢該通知的配置，監聽事件，調用實例方法。

下文都以instanceNotification指代通知返回的實例。

通知的配置：

在通知實例上能夠讀取到設置通知時的全部配置，好比：

通知標題：instanceNotification. title、通知內容：instanceNotification. body、通知圖標：instanceNotification. icon等。

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

事件處理：

咱們可使用通知的實例來監聽通知的事件：

• click: 用戶點擊通知時被觸發
• show: 通知顯示的時候被觸發
• error: 通知遇到錯誤時被觸發
• close: 用戶關閉通知時被觸發

instanceNotification.onclick = e => { // do something 能夠是：打開網址，發請求，關閉通知等 } 複製代碼

注意：最好是一發出通知就當即監聽事件，不然有些事件可能一開始沒被觸發或永遠不會觸發。

例如：用定時器5秒後才監聽通知的點擊和顯示事件，則永遠不會觸發通知顯示的回調，點擊事件在5秒後才能夠正常起做用但會錯誤五秒以前用戶的點擊。

關閉通知

instanceNotification.close()
複製代碼

沒有設置不自動關閉的話，chrome通知將會在4.5秒左右自動關閉通知，safari則是5秒鐘(沒法設置不自動關閉)。

notification沒有定時控制通知多久後消失的功能，當出現多個通知，也沒法統一關閉。

這兩個問題，在我發佈的NPM包：notification-koro1中，都解決掉了，並提供更清晰的回調

應用場景

• 即時通信軟件(郵件、聊天室)
• 體育賽事結果彩票/抽獎結果
• 新聞網站重大新聞通知
• 網站的重大更新，重大新聞等。

notification其餘

這裏是一些API/瀏覽器細節，以及可能會遇到的問題，能夠先不看，等真正遇到了，回頭再來看。

用戶拒絕顯示通知：

一旦用戶禁止網站顯示通知，網站就不能再請求用戶受權顯示通知，須要用戶去設置中更改。

chrome瀏覽器的通知設置位置：設置>高級>內容設置>通知

saafari瀏覽器：偏好設置>網站>通知>找到網站>修改權限/恢復默認

關閉請求權限：

在chorme瀏覽器中：當用戶關閉請求權限的彈窗(右上角的叉叉)，頁面還沒刷新，咱們能夠再次向用戶請求權限。頁面刷新事後，瀏覽器默認用戶拒絕。

在safari瀏覽器下，沒有關閉請求權限的選項，用戶必須選擇贊成/拒絕。

icon不顯示問題：

多是網站進行了同源限制(好比github)，不是域名下面的圖片，會報錯，不能調用。

tag：

1. tag相同的通知，同時只能出現一個，老通知是否會被覆蓋取決於：renotify配置和瀏覽器。
2. chrome下：當通知關閉以後，上次出現過的tag在一段時間內，不能再出現，好比刷新頁面再請求相同tag的通知。（在safari下正常出現）

safari下面不能顯示icon

在safari下面，同一個網站(好比谷歌)，一樣的代碼，chorme能夠正常顯示icon，safari卻沒有icon，也沒有報錯。

谷歌以後發現,在stack overflow裏面看到safari只支持body和tag選項,並不支持icon選項。

連續觸發

在safari和chrome下短期內連續觸發通知(不設tag，不設requireInteraction)，會出現以下表現：

 

 

這個表現，通知沒有icon、標題、內容，就顯得沒有意義了，瀏覽器以這種形式，限制開發者不要頻繁打擾用戶。

notification-Koro1：

試一下notification-Koro1啦, 持續維護，簡單方便~

---

結語

本文寫的比較細，能夠先mark一下，而後之後真正用到這個API了，能夠先經過文中的栗子，而後再查找對應的內容。

還有就是注意瀏覽器間的差別，我本身就試了chrome和safari，而後這兩個瀏覽器在實現細節上有不少不同的地方，開發的時候注意一下。

但願看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。

博客、前端積累文檔、公衆號、GitHub

以上2019.02.17

參考資料：

notification-Koro1

簡單瞭解HTML5中的Web Notification桌面通知

Notification MDN

HTML5 桌面通知：Notification API

做者：OBKoro1 連接：https://juejin.im/post/5c6df433f265da2de80f5eda 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。