Home > Article > Web Front-end > 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!