1. 程式人生 > >javascript-瀏覽器消息提醒

javascript-瀏覽器消息提醒

練手 index 詳細 nts tts miss 了解 .com asc

如何讓用戶在瀏覽器最小化的狀態下也能及時的收到消息提醒呢? 這個問題作為webRd是要正面面對的. 大約可分兩種場景:一種是類似桌面通知的形式還有一種是類似QQ提醒(在系統任務欄閃爍隨後高亮);接下來分別研究下:

桌面提醒:

這個H5有個強大的API沒錯就是Notification, 沒聽過? https://developer.mozilla.org/en-US/docs/Web/API/notification 先去了解下,很詳細;瀏覽器不同對其支持程度也不同,簡單講就是有兼容問題,而筆者要說的就是基於Notification的一款小類庫 https://github.com/ttsvetko/HTML5-Desktop-Notifications,其支持:IE9+、Safari6、Firefox、Chrome;好吧都是前輩的結晶,我就是個搬磚的,下面附一個簡單的小demo:

ps: 麽有用類庫, 就是練手用的..實際還是用類庫吧;


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);
}
}
 

任務欄提醒:

這個還真是個問題; 至於解決的終極方法目前筆者還沒研究明白;不過window.open 這種彈窗會觸發閃爍提醒, 但需要解決用戶禁止彈窗的情況,可以模擬from提交 || 超鏈接(a) || 利用瀏覽器冒泡;這幾種方法都可以解決大部分被攔截的情況; 可這都不是筆者想要的;因為提示內容展示在彈窗中總是不好的,用戶很容易蒙圈,怎麽一有提示就多個標題欄呢...很煩,貌似內存溢出也可以,不過這個就算了,除非腦子進水了...; 期待大神指點..;

javascript-瀏覽器消息提醒