以下代碼需要放在web容器中運行!!!!!!
<!DOCTYPE html>
<html>
<head>
<title>Web notification</title>
</head>
<body>
<script type="text/javascript">
var NotificationHandler = {
isNotificationSupported: 'Notification' in window,
isPermissionGranted: function() {
return Notification.permission === 'granted';
},
requestPermission: function() {
if (!this.isNotificationSupported) {
console.log('the current browser does not support Notification API');
alert('the current browser does not support Notification API');
return;
}
Notification.requestPermission(function(status) {
//status是授權狀態，如果用戶允許顯示桌面通知，則status爲'granted'
console.log('status: ' + status);
alert('status: ' + status);
//permission只讀屬性
var permission = Notification.permission;
//default 用戶沒有接收或拒絕授權 不能顯示通知
//granted 用戶接受授權 允許顯示通知
//denied 用戶拒絕授權 不允許顯示通知
console.log('permission: ' + permission);
alert('permission: ' + permission);
});
},
showNotification: function() {
if (!this.isNotificationSupported) {
console.log('the current browser does not support Notification API');
return;
}
if (!this.isPermissionGranted()) {
console.log('the current page has not been granted for notification');
return;
}
var n = new Notification("sir, you got a message", {
icon: 'qq-weibo.png',
body: 'you will have a meeting 5 minutes later.'
});
//onshow函數在消息框顯示時會被調用
//可以做一些數據記錄及定時操作等
n.onshow = function() {
console.log('notification shows up');
//5秒後關閉消息框
setTimeout(function() {
n.close();
}, 5000);
};
//消息框被點擊時被調用
//可以打開相關的視圖，同時關閉該消息框等操作
n.onclick = function() {
alert('open the associated view');
//opening the view...
n.close();
};
//當有錯誤發生時會onerror函數會被調用
//如果沒有granted授權，創建Notification對象實例時，也會執行onerror函數
n.onerror = function() {
console.log('notification encounters an error');
//do something useful
};
//一個消息框關閉時onclose函數會被調用
n.onclose = function() {
console.log('notification is closed');
//do something useful
};
}
};
window.onload = function(){
console.log(NotificationHandler);
NotificationHandler.requestPermission();
NotificationHandler.showNotification();
}
</script>
</body>
</html>