html5 desktop reminder: Notifycations application introduction_html5 tutorial skills

Desktop reminders (web notifications) in HTML5 can pop up a message box in the current page window. This message box spans tab windows. This makes the reminder more convenient and easy for users to see when the user opens multiple tabs to browse the web. Currently, only the webkit kernel supports this feature.
This feature needs to be opened in http mode in chrome to enable it.
The desktop reminder function is implemented by the window.webkitNotifications object (webkit kernel).
The window.webkitNotifications object has no attributes and has four methods:
1.requestPermission()
　This method is used to apply for message reminder permission from the user. If this permission is not currently open, 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: Indicates that the user agrees to the message reminder, and the message reminder function can only be used in this state. ;
1: Indicates the default state, the user neither rejects nor agrees;
2: Indicates that the user rejects the message reminder.
2.checkPermission()
　 This method is used to obtain the status value of the permission applied for by requestPermission().
3.createNotification()
This method creates a reminder message as a pure message. It accepts three string parameters:
iconURL: the icon address displayed in the message,
title: the title of the message,
body: the text content of the message body
This method will return a Notification object, and more settings can be made for this object.
Attributes and methods of Notification object:

Copy code

The code is as follows:

dir: ""
onclick: null
onclose: null
ondisplay: function (event) {
onerror: 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 possible values ​​are "auto" (automatic), "ltr "(left to right), "rtl"(right to left).
Tag: Add a tag name to the message. If this attribute 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 a maximum of 3 message boxes will be displayed. If there are more than 3, subsequent message notifications will be blocked.
onshow: This event is triggered when the message box is displayed;
onclick: This event is triggered when the message box is clicked;
onclose: This event is triggered when the message is closed;
onerror: When This event is triggered when an error occurs;
Methods:
addEventListener && removeEventListener: conventional methods to add and remove events;
show: display the message reminder box;
close: close the message reminder box;
Cancel: Close the message reminder box, the same as close;
4.createHTMLNotification()
This method is different from createNotification() in that it creates the message in HTML and accepts one parameter : The URL of the HTML file. This method also returns the Notification object.
An example:

Copy the code

The code is as follows: