HTML5特性之谷歌瀏覽器桌面消息(window.Notification)推送:

HTML5特性之谷歌瀏覽器桌面消息(window.Notification)推送:

用法:

(1)消息推送會默認關閉-主要通過window.Notification.permission來判斷

"denied"? --- 為用戶點擊了禁用(拒絕打開推送功能)

"default" ----推送功能默認關閉

"granted" ----推送功能為開啟狀態(tài)(用戶點擊允許后的狀態(tài))

在瀏覽器載入的時候可以選擇判斷狀態(tài)

```

if(window.Notification.permission=="default"){

//如果沒有開啟,something

}

```

(2)讓用戶選擇是否同意開啟推送的API是window.Notification.requestPermission(callback);

requestPermission是一個函數(shù),內部需要一個回調函數(shù),用戶一旦做出選擇,則會觸發(fā)該回調

```

window.Notification.requestPermission(function(stauts){

//用戶如果做出選擇會觸發(fā)回調

//stauts 這個值就能判斷出用戶到底是做了哪種選擇(返回的是一個字符串狀態(tài),參考第一條);

});

```

(3)如果開啟后則可以創(chuàng)建消息推送實例了,通過new關鍵字來創(chuàng)建? new Notification(title,option)

這里面有兩個參數(shù),第一個是標題指定字符串即可

第二個是配置選項option = {body:內容,icon:圖標}//后面還有其他的可選項

option對象里面的body是展示消息的內容,icon是用來放推送消息的圖標的(可指定icon圖片路徑均可);

(4)創(chuàng)建推送消息之后還會返回有默認的事件:onclick,onshow,onclose

var notify = Notification(title,option);

通過notify來指定:

notify.onclick = function(){}

notify.onshow = function(){}? //一般會給個setTimeOut讓它關閉掉

notify.onclose = function(){}

注意:1.目前該特性僅支持版本比較新的火狐或者谷歌瀏覽器

2.之前偏舊一點的瀏覽器可能是使用(window.webkitNotification)對象來判斷和實例化推送功能,

但是在現(xiàn)在新版本中均使用(window.Notification)對象,不再支持webkitNotification。

3.本地只能測試是否開啟本地提示選項,無法實現(xiàn)消息推送測試,需要真的實現(xiàn)消息推送需要將程序

部署到服務端

4.當你選擇開啟或者關閉后,頁面刷新后即使告訴瀏覽器再次選擇,此時是無效的,

選擇一次后會默認儲存當前選擇,下次打開瀏覽器的時候將不會再次提示你。

貼代碼示例:

(function(window){

var index = 0;

var permission = "default";

var sjNotify = function(title,content,icon){

var Notification = window.Notification || window.mozNotification || window.webkitNotification;

if (!Notification) {

alert("您的瀏覽器不支持此特性");

return false;

}

if(Notification && permission==="default" && index===0){

//支持,但是未開啟桌面提醒,進行相關操作、或提示開啟

window.Notification.requestPermission(function(status){

? ? ? permission = status;

? ? ?index++;

? ? ? ?});

}

else

{

var options = {

body: content,

icon: icon || "./static/sj/img/notify.ico"

};

if (permission === "granted"){

//支持并且開啟桌面消息提醒

var instance = new Notification(title, options);

instance.onclick = function() {

instance.close();

};

instance.onerror = function() {

};

instance.onshow = function() {

setTimeout(function () {

instance.close();

},3000)

console.log(instance.body)

};

instance.onclose = function() {

};

}

else if (permission == "denied")

{

//支持但是未開啟

return false;

}

else

{

//用戶已經忽略選擇

return false;

}

}

}

window.sjNotify = sjNotify;

})(this);

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容