Html5 desktop notification, notification usage, notification box in the lower right corner, html5notification

Html5 desktop notification, notification usage, notification box in the lower right corner, html5notification

1. Determine whether the browser supports window. Notification.

2. Check whether the browser has enabled the prompt permission: Notification. permission = 'granted' (if not, set Notification. requestPermission ())

3. Set the content of the prompt: var notification = new Notification ('order prompting ', {body: "You have a new order:" + data + ""}); // Notification ("title", "content ")

4. You can set other functions, such as message click events: notification. onclick = function (e ){
Alert ("click ")
}

Example:

If (window. notification) {if (Notification. permission = 'granted') {var notification = new Notification ('title', {body: "content can be customized by yourself"}); notification. onclick = function (e) {alert ("Click me") // you can click to open a URL} else {Notification. requestPermission (); // set the notification to be allowed }}

Extended: The configurable attributes of the content are as follows:

The available events are as follows:

• Notification.onclickProcessingclickEvent processing. Triggered when a user clicks a notification.
• Notification.onshowProcessingshowEvent processing. Triggered when the notification is displayed.
• Notification.onerrorProcessingerrorEvent processing. The notification is triggered whenever an error occurs.
• Notification.oncloseProcessingcloseEvent processing. Triggered when the user closes the notification.

How to disable the notification instance:

var n = new Notification(theTitle,options);  setTimeout(n.close.bind(n), 4000);

 

Note: ie does not support it. I have successfully tested it on Google and Firefox.

Record it when you develop your own data. If you pass by, please ignore it or give me some advice on what you need to pay attention to. Thank you.