Implementation of HTML5 desktop notification prompt function

HTML5 gives web pages better meaning and structure. Richer tags will come with support for RDFa, microdata and microformats, building a data-driven Web that is more valuable to both programs and users. In this article, we will share with you how to implement the desktop notification prompt function in HTML5.

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 to let the browser show whether The prompt to allow notifications returns the same "3" values ​​as Notification.permission. "granted" "default" "denied" The user allows the notification. The user has not yet managed it, and the user dislikes it.

Related recommendations:

HTML5 Desktop Notification Notification API Usage

html5 Desktop Notification (Web Notifications) Example Analysis_html5 Tutorial Skills

H5 Example of Implementing Desktop Notification and Prompt Function

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