Maison  >  Article  >  interface Web  >  Comment permettre aux utilisateurs de recevoir des rappels de messages du navigateur ?

Comment permettre aux utilisateurs de recevoir des rappels de messages du navigateur ?

零下一度
零下一度original
2017-06-26 11:46:363650parcourir

Comment les utilisateurs peuvent-ils recevoir des rappels de messages en temps opportun, même lorsque le navigateur est réduit ? Ce problème doit être affronté de front en tant que webRd. Il peut être grossièrement divisé en deux scénarios : l'un est similaire à une notification sur le bureau et l'autre est similaire à un rappel QQ (clignote puis est mis en surbrillance dans la barre des tâches du système) ; les séparément :

Rappel sur le bureau :

Ce H5 a une API puissante, oui, c'est une notification, vous n'en avez jamais entendu parler ? Commençons par le découvrir, c'est très détaillé ; différents navigateurs ont différents niveaux de support. Pour faire simple, il y a des problèmes de compatibilité. Ce dont je veux parler est une petite bibliothèque de classes basée sur Notification, qui prend en charge : IE9+, Safari6, Firefox, Chrome ;Eh bien, tout cela est le résultat de mes prédécesseurs, je ne suis qu'un bricoleur, voici une démo simple :

ps : Y a-t-il une bibliothèque de classes utile, c'est juste pour m'entraîner... en fait, je ferais mieux d'utiliser la bibliothèque de classe

<br>
function _Notification(title,option){
    var Notification = window.Notification || window.mozNotification || window.webkitNotification;
    Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
    function creatNotification(title, option){
       var instance = new Notification(title, option);
        instance.onclick = function () {
            console.log('onclick');
        };
        instance.onerror = function () {
            console.log('onerror');
        };
        instance.onshow = function () {
            console.log('onshow');
        };
        instance.onclose = function () {
            console.log("close")
        }
    }
    function requestPermission(title, option){
        Notification.requestPermission(function(status) {
            status === "granted"?creatNotification(title, option):failNotification(title);
        });
    }
    function failNotification(title){
        var timer;
        return function(timer){
            var index = 0;
            clearInterval(timer);
            timer = setInterval(function() {
                if(index%2) {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【   】'+ title;
                }else {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;
                }
                index++;
                if(index > 20) {
                    clearInterval(timer);
                }
            }, 500);
        }(timer);
    }
}
 <br>

Rappel de la barre des tâches :

C'est vraiment un problème ; ; quant à la solution ultime, l'auteur ne l'a pas encore étudiée ; mais window.open Ce type de fenêtre pop-up déclenchera un rappel clignotant, mais il doit résoudre le problème de l'interdiction de la fenêtre pop-up par l'utilisateur. peut simuler à partir de la soumission Hyperlien (a) || Utiliser le bouillonnement du navigateur ; ces méthodes peuvent résoudre la plupart des problèmes. La situation d'être intercepté, mais ce n'est pas ce que l'auteur souhaite car il n'est toujours pas bon d'afficher le contenu de l'invite ; dans la fenêtre contextuelle, l'utilisateur peut facilement être confus. Pourquoi y a-t-il plusieurs barres de titre lorsqu'il y a une invite... C'est très ennuyeux, il semble qu'un débordement de mémoire soit également possible, mais oubliez ça, à moins que votre cerveau ne le soit. inondé...; Dans l'attente des conseils de Dieu...;

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn