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

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

零下一度
Libérer: 2017-06-26 11:46:36
original
3706 Les gens l'ont consulté

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>
Copier après la connexion
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);
    }
}
Copier après la connexion
 <br>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal