Js 之notification瀏覽器桌面通知

一、示例

function showDeskTopNotice(id, title, msg){
    var Notification = window.Notification || window.mozNotification || window.webkitNotification;
    if(Notification){
        Notification.requestPermission(function(status){
            //status默認值'default'等同於拒絕 'denied' 意味着用戶不想要通知 'granted' 意味着用戶同意啟用通知
            if("granted" != status){
                return;
            }else{
                var tag = "sds"+Math.random();
                var notify = new Notification( title, {
                    dir:'auto',
                            lang:'zh-CN',
                            requireInteraction: true,
                            tag:id,//實例化的notification的id
                            icon:'/kfmanage/public/assets/images/index/workerman_logo.png',//通知的縮略圖,//icon 支持ico、png、jpg、jpeg格式
                            body:msg //通知的具體內容
                    });
                    notify.onclick=function(){
                        //如果通知消息被點擊,通知窗口將被激活
                        window.focus();
                        notify.close();
                        //打開對應的界面
                        $("#v"+id+" .visit_content").trigger('click');
                    },
                    notify.onerror = function () {
                        console.log("HTML5桌面消息出錯！！！");
                    };
                    notify.onclose = function () {
                        console.log("HTML5桌面消息關閉！！！");
                    };
                }
        });
    }else{
        console.log("您的瀏覽器不支持桌面消息");
    }
};

二、參數說明

Notification的參數：

• title：通知的標題
• options：通知的設置選項（可選）。
  • body：字符串。通知的body內容。
  • tag：代表通知的一個識別標簽，相同tag時只會打開一個通知窗口。
  • icon：字符串。要在通知中顯示的圖標的URL。
  • data：想要和通知關聯的數據,可以在new Notification返回的實例中找到。
  • renotify: 布爾值。相同tag，新通知出現的時候是否替換之前的(開啟此項，tag必須設置)。
  • requireInteraction：布爾值。通知不自動關閉，默認為false(自動關閉)。