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