How to let users receive browser message reminders?

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!