Comment: Desktop notifications in HTML5 can pop up a message box in the current page window. This message box spans the Tab window. This reminder is more convenient when users open multiple tabs to browse the web page and are easy to see.
Desktop notifications in HTML5 can pop up a message box in the current page window. This message box spans the Tab window. This reminder is more convenient and easy for users to see when users open multiple tabs to browse web pages. Currently, as long as the webkit kernel supports this function.This feature needs to be enabled in Chrome in http mode.
The desktop reminder function is implemented by the window.webkitNotifications object (webkit kernel).
The window.webkitNotifications object has no attributes, and there are four methods:
1.requestPermission()
This method is used to request message reminder permission to the user. If the permission is not currently opened, the browser will pop up the authorization interface. After the user authorizes, a status value (an integer of 0, 1 or 2) is generated inside the object:
0: It means that the user agrees to the message reminder, and the information reminder function can only be used in this state;
1: Indicates the default status, the user neither rejects nor agrees;
2: Indicates that the user refuses message reminder.
2.checkPermission()
This method is used to obtain the status value of the permission requested by requestPermission().
3.createNotification()
This method creates a reminder message in a pure message, which accepts three string parameters:
iconURL: The icon address displayed in the message,
title: the title of the message,
body: message body text content
This method will return a Notification object, which can be set for more.
Properties and methods of Notification object:
dir: ""
onclick: null
onclose: null
ondisplay: function (event) {
oneerror: null
onshow: null
replaceId: ""
tag: ""
__proto__: Notification
addEventListener: function addEventListener() { [native code] }
cancel: function cancel() { [native code] }
close: function close() { [native code] }
constructor: function Notification() { [native code] }
dispatchEvent: function dispatchEvent() { [native code] }
removeEventListener: function removeEventListener() { [native code] }
show: function show() { [native code] }
__proto__: Object
dir: Set the arrangement direction of messages, the values can be taken as auto (auto), ltr(left to right), rtl(right to left).
tag: Add a tag name to the message. If this property is set, when there is a new message reminder, messages with the same label will only be displayed in the same message box, and the latter message box will replace the previous one. Otherwise, multiple message prompt boxes will appear, but the maximum value will display 3 message boxes, if more than 3, the subsequent message notification will be blocked.
onshow: Triggers when the message box is displayed;
onclick: This event is triggered when the message box is clicked;
onclose: Triggers when the message is closed;
onerror: Triggers the event when an error occurs;
method:
addEventListener && removeEventListener: General add and remove event methods;
show: Show message reminder box;
close: Close the message reminder box;
cancel: Close the message reminder box, just like close;
4.createHTMLNotification()
The difference between this method and createNotification() is that it creates a message in HTML, accepting a parameter: the URL of the HTML file, and this method also returns the Notification object.
An example:
<!DOCTYPE HTML>
<html>
<head>
<title>notifications in HTML5</title>
</head>
<body>
<form>
<input type="button" value="Send notification" />
</form>
<script type="text/javascript">
document.getElementById("trynotification").onclick = function(){
notify(Math.random());
};
function notify(tab) {
if (!window.webkitNotifications) {
return false;
}
var permission = window.webkitNotifications.checkPermission();
if(permission!=0){
window.webkitNotifications.requestPermission();
var requestTime = new Date();
var waitTime = 5000;
var checkPerMiniSec = 100;
setTimeout(function(){
permission = window.webkitNotifications.checkPermission();
if(permission==0){
createNotification(tab);
}else if(new Date()-requestTime<waitTime){
setTimeout(arguments.callee,checkPerMiniSec);
}
}, checkPerMiniSec);
}else if(permission==0){
createNotification(tab);
}
}
function createNotification(tab){
var showSec = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var + new Date().toLocaleTimeString() + "] close after " + (showSec/1000) + " seconds";
var body = "hello world, i am webkitNotifications information";
var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.tag = tab;
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, showSec);
}
popup.show();
}
</script>
</body>
</html>