當我們使用了websocket技術實現了實時的推送訪客來到訊息,但是我們只能隨時看著頁面不離開才能知道有訪客來到

現在增加瀏覽器的通知訊息,就可以只要開啟著介面,不用一直盯著,幹別的事去就可以了,有新訊息會從右下角彈出來

測試地址如下,當有訪客點選諮詢按鈕時,客服後臺會彈出提示:

https://gofly.sopans.com/index

首先要明確一點,現在的通知只能在https的環境下使用 , 非https , 不能使用瀏覽器通知,Notification.permission返回的是禁止

             notify(title, options, callback) {
                    
 
// 先檢查瀏覽器是否支援
                    if (!window.Notification) {
                        return;
                    }
                    var notification;
                    // 檢查使用者曾經是否同意接受通知
                    if (Notification.permission === 'granted') {
                        notification = new Notification(title, options); //
 
 顯示通知

                    } else {
                        var promise = Notification.requestPermission();
                    }

                    if (notification && callback) {
                        notification.onclick = function(event) {
                            callback(notification, 
 
event);
                        }
                    }
             },

notify("標題", {
                        body: "內容",
                        icon: "頭像"
                    }, function(notification) {

                        notification.close();

});

websocket部分就是監聽onmessage方法,根據返回的json訊息欄位進行區分判斷,這裡是需要自己來定義,也可以參考上面地址的原始碼