H5 implements desktop notification-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

H5 implements desktop notification

php中世界最好的语言

Mar 27, 2018 am 11:42 AM

html5 desktop notify

This time I will bring you H5 to implement desktop notifications. What are the precautions for H5 to implement desktop notifications? The following is a practical case, let’s take a look.

The specific code is as follows:

<button id="button">有人想加你为好友</button>
<p id="text"></p>
;(function (){
    if(window.Notification){
        var btn = document.getElementById("button");
        var txt = document.getElementById("text");
        btn.onclick = function (){
            if(Notification.permission == "granted"){
                popNotice();
            }else if(Notification.permission != "denied"){
                Notification.requestPermission().then(function (permission){
                    popNotice()
                })
            }
        };
        function popNotice(){
            if(Notification.permission == "granted"){
                var notification = new Notification("你好:",{
                    body:"请问今晚有空吗",
                    icon:"http://image.zhangxinxu.com/左边头像地址"
                });
                notification.onclick = function (){
                    txt.innerHTML = new Date().toTimeString().split(" ")[0]+"收到信息";
                    notification.close();
                }
            }
        }
    }else{
        console.log("浏览器不支持Notification");
    }
})();

Copy after login

Notification.requestPermission() is a request, which allows the browser to prompt whether to allow notifications and returns "3" values "granted" like Notification.permission. "default" "denied" User allows notification, the user has not managed it yet, the user dislikes it

I believe you have mastered the method after reading the case in this article, and there will be more exciting things Please pay attention to other related articles on php Chinese website!