Home  >  Article  >  Web Front-end  >  How to let users receive browser message reminders?

How to let users receive browser message reminders?

零下一度
零下一度Original
2017-06-26 11:46:363678browse

How to enable users to receive timely message reminders even when the browser is minimized? This problem needs to be faced head-on as webRd. It can be roughly divided into two scenarios: one is similar to a desktop notification and the other is similar to a QQ reminder (flashes and then highlights in the system taskbar); let's study them separately:

Desktop Reminder:

This H5 has a powerful API, yes it is Notification, never heard of it? Let’s learn about it first, it’s very detailed; different browsers have different levels of support for it. To put it simply, there are compatibility issues. What I want to talk about is a small class library based on Notification, which supports: IE9+, Safari6, Firefox, Chrome ;Well, it’s all the result of my predecessors. I’m just a bricklayer. Here’s a simple demo:

ps: Is there any useful class library? It’s just for practicing...actually, I’d better use the class library;

<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>

Taskbar reminder:

This is really a problem; As for the ultimate solution, the author has not studied it yet; but pop-ups like window.open will To trigger a flash reminder, but you need to solve the problem of users banning pop-up windows, you can simulate from submission || hyperlink (a) || use browser bubbling; these methods can solve most intercepted situations; but these are all This is not what I want; because it is always not good to display prompt content in a pop-up window, users can easily be confused. How come there are multiple title bars when there is a prompt... It is very annoying. It seems that memory overflow is also possible, but this Forget it, unless your brain is flooded...; I'm looking forward to some guidance...;

The above is the detailed content of How to let users receive browser message reminders?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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