<script>
    var dir = window.location;
    notiBtn.onclick=function () {
        if(window.Notification){
            if(window.Notification.permission=="granted"){
                var options = {
                    body:"消滅人類暴政，世界屬於三體！",
                    icon:"http://youdaocloud.oss-cn-shanghai.aliyuncs.com/202279.jpg",
                    dir:"auto",
                    tag:"SoMany",
                    silent:false
                };
                var notice = new Notification("宣言",options);
            }
            else {
                Notification.requestPermission();
            }
        }
        else{
            alert("你的瀏覽器不支援該功能，真是遺憾啊。")
        }
    }
</script>
 

上述程式碼直接在所需要的介面引入，可直接喚醒彈框。

其中彈框訊息可加入點選事件：

const n = new Notification('XX網站訊息通知', {
    body: '你的朋友有新狀態啦，快去圍觀吧！',
    tag: '2ue',
    icon: 'https://2ue.github.io/images/common/avatar.png',
    data: {
        url: 'https://2ue.github.io'
    },
    timestamp: 3000
});

n.onshow = function () {
    console.log('通知顯示了！');
}
n.onclick = function (e) {
    //可以直接通過例項的方式獲取data內自定義的資料
    //也可以通過訪問回撥引數e來獲取data的資料
    window.open(n.data.url, '_blank');
    n.close();
}
n.onclose = function () {
    console.log('你牆壁了我！！！');
}
n.onerror = function (err) {
    console.log('出錯了，小夥子在檢查一下吧');
    throw err;
}
 

如果想要實現點對點的推送，還是需要用websocket進行實現，這個只是單純的實現介面彈框訊息！

如有疑問諮詢qq:1147726728