Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to apply Notifycations in html5. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Desktop reminder (web notifications) in HTML5 can pop up a message box in the current page window, which is across the Tab window, which is more convenient and easy for users to see when users open multiple tab to browse the web. Currently, as long as the webkit kernel supports this feature.

This feature needs to be opened in http under chrome before it can be enabled.

The desktop reminder function is implemented by the window.webkitNotifications object (webkit kernel).

The window.webkitNotifications object has no properties, and there are four methods:

1.requestPermission ()

This method is used to apply for message reminder permission from the user. If the permission is not currently open, the browser will pop up the authorization interface. After the user is authorized, a status value (an integer of 0, 1 or 2) is generated inside the object:

0: indicates that the user agrees with the message reminder, and the information reminder function can only be used in this state.

1: indicates the default state, which is neither rejected nor agreed by the user

2: indicates that the user rejects the message reminder.

2.checkPermission ()

This method is used to get the status value of the permission requested by requestPermission ().

3.createNotification ()

This method creates a reminder message as a pure message, which accepts three string parameters:

IconURL: the address of the icon displayed in the message

Title: the title of the message

Body: message body text content

This method returns a Notification object for which more settings can be made.

Properties and methods of the Notification object:

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: sets the orientation of messages. Available values are "auto" (automatic), "ltr" (left to right), "rtl" (right to left).

Tag: add a tag signature to the message. If you set this property, 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 boxes will appear, but the maximum value will show 3 message boxes, more than 3, and subsequent message notifications will be blocked.

Onshow: triggers this event when the message box is displayed

Onclick: this event is triggered when the message box is clicked

Onclose: triggers this event when the message is closed

Onerror: this event is triggered when an error occurs

Methods:

AddEventListener & & removeEventListener: general methods for adding and removing events

Show: display message reminder box

Close: turn off the message reminder box

Cancel: turns off the message reminder box, just like close

4.createHTMLNotification ()

This method differs from createNotification () in that it creates the message as HTML and accepts a parameter: the URL of the HTML file, which also returns a Notification object.

An example:

The code is as follows:

Notifications in HTML5

Document.getElementById ("trynotification"). Onclick = function () {

Notify (Math.random ())

}

Function notify (tab) {

If (! window.webkitNotifications) {

Return false

}

Var permission = window.webkitNotifications.checkPermission ()

If (permissionrequests 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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.