Home > Web Front-end > H5 Tutorial > H5 implements desktop notification

H5 implements desktop notification

php中世界最好的语言
Release: 2018-03-27 11:42:17
Original
2796 people have browsed it

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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template