Html5中桌面通知Notification的實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)

這篇文章主要介紹Html5中桌面通知Notification的實(shí)現(xiàn)示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司于2013年成立，先為廣信等服務(wù)建站，廣信等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為廣信企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1. 實(shí)例一個(gè)Notification

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

訪問對(duì)應(yīng)的實(shí)例屬性:
n.actions // 一個(gè)只讀的NotificationAction對(duì)象數(shù)組。每一個(gè)對(duì)象描述用戶可以在一個(gè)通知中選擇的單個(gè)操作。
n.image // 通知的一部分顯示的圖像的URL
n.badge // 當(dāng)沒有足夠的空間顯示通知本身時(shí)，用于表示通知的圖像的URL。
n.permission // 有三個(gè)值granted,denied, 或default 當(dāng)狀態(tài)值為granted時(shí)可以發(fā)送通知消息 default默認(rèn)用戶沒處理 denied 用戶拒絕
n.renotify // 布爾值。新通知出現(xiàn)的時(shí)候是否替換之前的。如果設(shè)為true，則表示替換，表示當(dāng)前標(biāo)記的通知只會(huì)出現(xiàn)一個(gè)。注意這里的“當(dāng)前標(biāo)記”沒？沒錯(cuò)，true參數(shù)要想起作用，tag必須需要設(shè)置屬性值。
n.requireInteraction // 布爾值, 指的是通知是否保持活動(dòng)直到用戶點(diǎn)擊或取消通知 而不是自動(dòng)關(guān)閉..
n.silent // 布爾值。通知出現(xiàn)的時(shí)候，是否要有聲音。默認(rèn)false, 表示無聲。
n.timestamp //通知?jiǎng)?chuàng)建或者可以使用的時(shí)間。
n.data // 任意類型和通知相關(guān)聯(lián)的數(shù)據(jù)。
n.vibrate // 通知顯示時(shí)候，設(shè)備震動(dòng)硬件需要的震動(dòng)模式。所謂振動(dòng)模式，指的是一個(gè)描述交替時(shí)間的數(shù)組，分別表示振動(dòng)和不振動(dòng)的毫秒數(shù)，一直交替下去。例如[200, 100, 200]表示設(shè)備振動(dòng)200毫秒，然后停止100毫秒，再振動(dòng)200毫秒。 (移動(dòng)端)
n.sound // 字符串。音頻地址。表示通知出現(xiàn)要播放的聲音資源。
n.sticky // 通知吸附不容易被清除... (移動(dòng)端)
n.noscreen // 布爾值。是否不再屏幕上顯示通知信息。默認(rèn)false, 表示要在屏幕上顯示通知內(nèi)容。(移動(dòng)端)

此時(shí)實(shí)例 n 有四個(gè)事件處理:
1> onclick 用戶對(duì)通知信息的點(diǎn)擊事件
2> onshow 通知消息展示之后觸發(fā)的事件
3> onerror 遇到錯(cuò)誤會(huì)觸發(fā)的事件
4> onclose close事件的處理

2. Notification對(duì)象會(huì)有什么屬性/方法呢?利用控制臺(tái)中的window對(duì)象輸出點(diǎn)開查看就可以看到:

值得注意的是: requestPermission()方法僅在Notification對(duì)象有效,實(shí)例對(duì)象無效!!!這個(gè)方法是用來向用戶申請(qǐng)顯示通知的權(quán)限,只能被用戶主動(dòng)去調(diào)用(在頁(yè)面onload中可以調(diào)用,可以向用戶申請(qǐng),之后再去發(fā)送...)

實(shí)例對(duì)象擁有的方法有:

　　(1). close() 用于關(guān)閉通知消息 --> 也可以在onshow方法加延遲調(diào)用,提高用戶體驗(yàn)感...

　　(2). addEventListener() 監(jiān)聽事件(這個(gè)通用方法)

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

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

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

但是,http的域名在谷歌瀏覽器被默認(rèn)關(guān)閉,還不允許更改,查看谷歌瀏覽器控制臺(tái)有警告信息--->

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證書,真的是有毒...雖然在自己的主頁(yè)中添加該功能也只能在火狐瀏覽器爽一爽....

(騰訊云有免費(fèi)一年的ssl證書,可自己進(jìn)行安裝...)

// 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對(duì)您發(fā)來問候", {
            icon : 'gxlself.png',
            body : '歡迎來訪,鄙人萬分感激! 點(diǎn)擊即可跳轉(zhuǎn)至我的博客頁(yè)面~'
        });
        n.onshow = function () {
            console.log('gxlself已經(jīng)發(fā)送通知信息');
            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消息窗口關(guān)閉')
        }
    }  
}

這是火狐瀏覽器執(zhí)行后的效果展示:

再來看看谷歌本地跑的效果:(域名已經(jīng)被默認(rèn)攔截關(guān)閉,上面已經(jīng)說明,不再重復(fù))

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

------- 桌面版應(yīng)用 -----------

當(dāng)你要在開放 web 應(yīng)用中使用通知時(shí)，請(qǐng)確保將desktop-notification 權(quán)限添加到你的 manifest 文件中。通知可以被用于任何權(quán)限級(jí)別，hosted 或更高。

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

以上是“Html5中桌面通知Notification的實(shí)現(xiàn)示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：Html5中桌面通知Notification的實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article6/cdgsig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、營(yíng)銷型網(wǎng)站建設(shè)、做網(wǎng)站、軟件開發(fā)、云服務(wù)器、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)