Notification 瀏覽器的訊息推送
Notification 物件,存在於window上,可以生成一個通知物件以推送推送瀏覽器訊息通知。
這玩意相容性不咋地,實不實用看場景。對外使用者的應用,自然是雞肋功能,因為你無法知道使用者使用的是哪家哪版本的瀏覽器;對內部系統的幫助則是很大,內部員工使用的瀏覽器是可控的,為了實現更大的工作效率,該功能可用於比如站內訊息、跟蹤事務狀態變化等的通知,並且,這玩意只要不關閉通知所在的網頁,即使瀏覽器活動標籤不是這個網頁,依然可以彈出通知,這樣就可以在做其他工作的同時及時收到需要的訊息了。
實現效果如圖(在Windows系統下,是在桌面右下側圖示欄上方彈出):
對的,就是這個。 但是你聽我解釋..我真的沒有下過這個單...
進入正文。
Notification 是個建構函式,它上面有三個靜態成員:maxActions、permission、requestPermission。
1. maxActions,這個屬性值為2,表示支援的最大的actions數量(actions見下文)。
2. permission,這個屬性有三個值:"granted"、"denied"、"default",default 和 denied 效果一樣,表示使用者不允許該網站顯示通知,granted表示使用者允許該網站顯示通知。
3. requestPermission,通過呼叫這個方法,瀏覽器會彈出框來讓使用者確認是否允許訊息通知,該方法傳入一個回撥函式作為引數,使用者授權結果作為回撥函式的引數給到開發者;該方法返回一個Promise。
程式碼如下:
// 開啟chrome瀏覽器,開啟www.baidu.com,開啟控制檯,然後... Notification.requestPermission(res =>{ console.log(res); }); /* * 返回值 * Promise {<pending>} *__proto__: Promise *[[PromiseStatus]]: "resolved" *[[PromiseValue]]: "granted" * * 輸出值: granted 因為我點選了允許。 */ Notification.permission // 輸出: "granted"
Notification 建構函式需要2個引數:title,options。
1. title 是訊息的標題
2. options 訊息的配置資訊,含有值:
2.1. body,通知訊息的內容,只有Windows系統下Firefox可以顯示多行資料,其餘環境下只顯示單行。
2.2. icon,通知的圖示圖片地址。
2.3. lang,訊息通知的語言,值參考 ofollow,noindex">ISO 2 letter language codes
2.4. dir,文字排列方向,三個值:auto、ltr、rtl。只有Windows系統下Firefox瀏覽器支援...
2.5. image,當沒有足夠的空間顯示通知本身時,用於表示通知的影象的URL。只有Windows系統下Chrome支援...
2.6. tag,在建構函式的選項引數中指定的通知ID(如果有的話),暫未研究出怎麼使用,也沒找到詳細的使用文件...
2.7. data,返回克隆後的訊息格式,暫未研究出怎麼使用,也沒找到詳細的使用文件...
2.8. actions,使用者操作行為的陣列,暫未研究出怎麼使用,也沒找到詳細的使用文件...
2.9. badge,當沒有足夠的空間顯示通知本身時,用於表示通知的影象的URL。然而測試過支援的瀏覽器,也沒有一個對於這個屬性做出反應...
2.10. vibrate,指定具有振動功能的裝置發出振動模式,然而在iphone手機上下載了幾個瀏覽器,都未成功彈出通知,所以該值結果還是未知...
2.11. requireInteraction,表示是否需要使用者手動關閉通知,預設false,然而即使設定為true,通知也有系統來控制,並不會一直處於活動狀態...
2.12. 還有幾個還在試驗階段的配置...
綜上所述,通過瀏覽器測試後(Firefox含Mac和Windows、Chrome含Mac和Windows、Safari),通用的有效配置僅有3個:title,body,icon。
使用程式碼如下:
function createNotify(title,options) { var PERMISSON_GRANTED = 'granted'; var PERMISSON_DENIED = 'denied'; var PERMISSON_DEFAULT = 'default'; if (Notification.permission === PERMISSON_GRANTED) { notify(title,options); } else { Notification.requestPermission(function (res) { if (res === PERMISSON_GRANTED) { notify(title,options); } }); } function notify($title,$options) { var notification = new Notification($title, $options); } } createNotify('測試通知',{body:'啊啊啊啊啊啊啊啊啊啊啊啊'});
Notification 例項上有一些事件:onclick、onerror、onclose(文件表示是要刪除的方法)、onshow(文件表示是要刪除的方法);一個方法:close;屬性:timestamp訊息的時間戳。
程式碼如下:
function createNotify(title,options) { var PERMISSON_GRANTED = 'granted'; var PERMISSON_DENIED = 'denied'; var PERMISSON_DEFAULT = 'default'; if (Notification.permission === PERMISSON_GRANTED) { notify(title,options); } else { Notification.requestPermission(function (res) { if (res === PERMISSON_GRANTED) { notify(title,options); } }); } function notify($title,$options) { var notification = new Notification($title, $options); console.log(notification); notification.onshow = function(event){ console.log('show : ',event); } notification.onclose = function(event){ console.log('close : ',event); } notification.onclick = function(event){ console.log('click : ',event); notification.close(); } } } createNotify('測試通知',{body:'啊啊啊啊啊啊啊啊啊啊啊啊'}); /* 依次列印 * show:Event Object(事件物件),事件的type為"show" * click:Event Object(事件物件),事件的type為"click"。點選訊息後訊息被關閉,跳到close事件。 * close:Event Object(事件物件),事件的type為"close" */
最後,它的相容性是這樣的...
最後,本地測試這玩意需要起個服務來訪問(可以用java或者nodejs隨便起個簡單的),直接開啟html是無效的,估摸著是瀏覽器處理通知地址的時候所需依賴導致。
就這麼多,將就著用。