在線客服系統原始碼開發實戰總結：H5 Notifications瀏覽器桌面通知-有解無憂

在瀏覽器訪問網站，想在瀏覽器最新化的情況下，也能收到右下角的訊息通知

這個時候就會用到H5 Notifications

具體效果可以參照演示頁面演示頁面-唯一在線客服系統

實作代碼js

function notify(title, options, callback) {

    // 先檢查瀏覽器是否支持
    if (!window.Notification) {
        console.log("瀏覽器不支持notify");
        return;
    }

    console.log("瀏覽器notify權限:", Notification.permission);
    // 檢查用戶曾經是否同意接受通知
    if (Notification.permission === 'granted') {
        var notification = new Notification(title, options); // 顯示通知
        if (notification && callback) {
            notification.onclick = function(event) {
                callback(notification, event);
            }
            setTimeout(function () {
                notification.close();
            },3000);
        }
    } else {
        Notification.requestPermission().then( (permission) =>function(){
            console.log("請求瀏覽器notify權限:", permission);
            if (permission === 'granted') {
                notification = new Notification(title, options); // 顯示通知
                if (notification && callback) {
                    notification.onclick = function (event) {
                        callback(notification, event);
                    }
                    setTimeout(function () {
                        notification.close();
                    }, 3000);
                }
            } else if (permission === 'default') {
                console.log('用戶關閉授權 可以再次請求授權');
            } else {
                console.log('用戶拒絕授權 不能顯示通知');
            }
        });
    }

}

使用上面封裝的函式

                    notify("名稱", {
                        body: "內容",
                        icon: "頭像地址"
                    },function(notification) {
                        notification.close();
                    });

如果自己在彈出授權申請的時候，點擊了拒絕，那么可以去瀏覽器的通知設定里面重新打開下

Edge瀏覽器設定通知

首先，打開Edge瀏覽器，點擊右上角的三個點，并在彈出的選單中找到且點擊“設定”
接著，在“設定”視窗中，選擇左側的“Cookie和網站權限”，在右側找到并點擊“通知”
最后，在“通知”頁面中，找到并取消勾選“發送前詢問（推薦）”即可

十年開發經驗程式員，離職全心創業中，歷時三年開發出的產品《唯一客服系統》

一款基于Golang+Vue開發的在線客服系統，軟體著作權編號：2021SR1462600，一套可私有化部署的網站在線客服系統，編譯后的二進制檔案可直接使用無需搭開發環境，下載zip解壓即可，僅依賴MySQL資料庫，是一個開箱即用的全渠道在線客服系統，致力于幫助廣大開發者/公司快速部署整合私有化客服功能，開源地址：唯一客服（開源學習版）官網地址：唯一客服官網

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/533554.html

標籤：其他

上一篇：TypeScript 全面進階指南之型別篇

下一篇：vue腳手架的使用