Implémentation de la fonction d'invite de notification du bureau HTML5

HTML5 donne aux pages Web un meilleur sens et une meilleure structure. Des balises plus riches prendront en charge RDFa, les microdonnées et les microformats, créant ainsi un Web basé sur les données et plus précieux pour les programmes et les utilisateurs. Dans cet article, nous partagerons avec vous comment implémenter la fonction d'invite de notification sur le bureau en HTML5.

Le code spécifique est le suivant :

<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() est une requête, permettant le navigateur lorsqu'on lui demande s'il doit autoriser les notifications, les mêmes valeurs "3" sont renvoyées comme Notification.permission : "accordé" "par défaut" "refusé" L'utilisateur autorise la notification, mais l'utilisateur ne l'a pas encore gérée, et l'utilisateur ne l'aime pas.

Recommandations associées :

Utilisation de l'API de notification de notification de bureau HTML5

Exemple de notification de bureau HTML5 (notifications Web) analyse_html5 compétences du didacticiel

Un exemple de H5 implémentant des fonctions de notification et d'invite sur le bureau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!