Html5中的桌面通知Notification的實現

前言:對於一個前段開發者,逛網頁總會留意一些新奇的功能,對於上班總會用到Teambition的我,總是能收到Notification...所以今天就來研究下這個H5功能...

 let n = new Notification( 這是一個通知訊息, //這是必選Title 一定會顯示的通知標題{ icon: xxx.png, // 這個icon是用來顯示通知中的左邊圖片body: 你好啊,我是xxx, // 通知中的內容字元dir: auto, // 文字的方向值包含: auto(自動), ltr(從左到右), rtl(從右向左) tag: gxlself //給與這個通知訊息一個ID, 用來對這個通知訊息進行刷新.移除.替換等操作// long: en-US //lang字段需要參考https://tools.ietf.org/html/bcp47 並不是必須沒看出啥作用... // ... // 其餘可選屬性見下實例屬性})

n.actions // 一個唯讀的NotificationAction物件陣列。每一個物件描述使用者可以在一個通知中選擇的單一操作。

n.image // 通知的一部分顯示的圖片的URL

n.badge // 當沒有足夠的空間顯示通知本身時，用於表示通知的圖像的URL。

n.permission // 有三個值granted , denied , 或default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝

n.renotify // 布林值。新通知出現的時候是否更換之前的。如果設為true，則表示替換，表示目前標記的通知只會出現一個。注意這裡的目前標記沒？沒錯， true參數要想起作用， tag必须需要設定屬性值。

n.requireInteraction // 布林值, 指的是通知是否保持活動直到使用者點擊或取消通知而不是自動關閉..

n.silent // 布林值。通知出現的時候，是否要有聲音。預設false , 表示無聲。

n.timestamp //通知建立或可以使用的時間。

n.data // 任意型別和通知相關聯的資料。

n.vibrate // 通知顯示時候，裝置震動硬體所需的震動模式。所謂振動模式，指的是一個描述交替時間的數組，分別表示振動和不振動的毫秒數，一直交替。例如[200, 100, 200]表示設備振動200毫秒，然後停止100毫秒，再振動200毫秒。 (移動端)

n.sound // 字串。音頻地址。表示通知出現要播放的聲音資源。

n.sticky // 通知吸附不容易被清除... (行動端)

n.noscreen // 布林值。是否不再螢幕上顯示通知訊息。預設false , 表示要在螢幕上顯示通知內容。 (移動端)

1> onclick 使用者對通知訊息的點擊事件

2> onshow 通知訊息展示之後觸發的事件

3> onerror 遇到錯誤會觸發的事件

4> onclose close事件的處理

值得注意的是: requestPermission()方法只在Notification物件有效,實例物件無效!!!這個方法是用來向使用者申請顯示通知的權限,只能被使用者主動去呼叫(在頁面onload中可以呼叫,可以向用戶申請,之後再去發送...)

實例物件擁有的方法有:

(1). close() 用於關閉通知訊息--> 也可以在onshow方法加延遲呼叫,提高使用者體驗感...

(2). addEventListener() 監聽事件(這個通用方法)

(3). removeEventListener 卸載監聽事件(通用,同上)

(4). dispatchEvent 分派事件(同上)

接下來,寫一個js測試, 如果使用的是Google瀏覽器,建議在設定中顯示通知將本地服務地址加入允許通知

但是,http的網域在Google瀏覽器被預設為關閉,還不允許更改,查看Google瀏覽器控制台有警告訊息--->

index.js:78 [Deprecation] The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/StTGz for more detailTGz for more details.

嗯,好吧,讓加https證書,真的是有毒...雖然在自己的主頁中添加該功能也只能在火狐瀏覽器爽一爽....

(騰訊雲有免費一年的ssl證書,可自行安裝...)

 // index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ constructor(self.showNotification() },3000)}class Gxlself{ constructor(){ this. isNotificationSupported = Notification in window; } isPermissionGranted(){ return Notification.permission === 'granted'; } requestPermission(){ if(!this.isNotificationSupported){ return; } Notification.requestPermission(status=>{ let permission = Notification.Notsion }; (){ if (!this.isNotificationSupported) { return; } if (!this.isPermissionGranted()) { return; } var n = new Notification(gxlself對您發來問候, { icon : 'gxlself.png', body : '歡迎來訪,鄙視萬分! 點擊即可跳到我的部落格頁面~' }); n.onshow = function () { console.log('gxlself已經傳送通知訊息'); setTimeout(function() { n.close(); }, 5000); } n.onclick = function () { location.href = 'http://gxlself. com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log('gxlself訊息視窗關閉') } } }

這是火狐瀏覽器執行後的效果展示:

再來看看Google本地跑的效果:(網域名稱已經被預設攔截關閉,上面已經說明,不再重複)

谷歌的效果其實挺好看的,嗯...只是一個https把我給屏蔽了哎...

------- 桌面版應用-----------

當你要在開放web 應用程式中使用通知時，請確保將desktop-notification權限加入你的manifest 檔案中。通知可以用於任何權限級別，hosted 或更高。

 permissions: { desktop-notification:{} }

這個Notification比較好玩,也是未來發送訊息的一個重要的一塊,留此記錄...希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。