H5 implements desktop notification

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");
    }
})();

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!

Recommended reading:

How to achieve online preview of PDF in H5

##H5+C3 to achieve clock effect

The above is the detailed content of H5 implements desktop notification. For more information, please follow other related articles on the PHP Chinese website!