h5桌面通知Notification

Notification · 發表 2018-09-24 23:08:00

摘要： H5中的桌面通知Notification 前言: 對於一個前段開發者,逛網頁總會留意一些新奇的功能,對於上班總會用到Teambition的我,總是能收到Notification...所以今天就來研究下這個H5功能... 1. 例項一個Notification let n = n...

H5中的桌面通知Notification

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

1. 例項一個Notification


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, 表示要在螢幕上顯示通知內容。(移動端)
n.

此時例項 n 有四個事件處理: 
 1> onclick 使用者對通知資訊的點選事件
 2> onshow通知訊息展示之後觸發的事件
 3> onerror 遇到錯誤會觸發的事件
 4> onclose close事件的處理

2. Notification物件會有什麼屬性/方法呢?利用控制檯中的window物件輸出點開檢視就可以看到:

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

例項物件擁有的方法有:

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

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

(3). removeEventListener 解除安裝監聽事件(通用,同上)

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

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

但是,http的域名在谷歌瀏覽器被預設關閉,還不允許更改,檢視谷歌瀏覽器控制檯有警告資訊--->

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/rStTGz for more details.

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

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

// index.js
window.onload = function(){
　　let gxlself = new Gxlself()
　　gxlself.requestPermission()
　　setTimeout(()=>{
　　　　gxlself.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.permission;
})
}
showNotification(){
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訊息視窗關閉')
}
}
}

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

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

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

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

當你要在開放 web 應用中使用通知時，請確保將 desktop-notification 許可權新增到你的 manifest 檔案中。通知可以被用於任何許可權級別，hosted 或更高。

　　"permissions": {
　　"desktop-notification":{}
　　}

這個Notification比較好玩,也是未來發送訊息的一個重要的一塊,留此記錄...

h5桌面通知Notification

H5中的桌面通知Notification

您可能也會喜歡…