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

This article mainly explains the "HTML5 desktop reminder function how to use", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "HTML5 desktop reminder function how to use" it!

A brief introduction to HTML5 Notification

HTML5 Notification, or desktop notification. At present, the browser is still a strict sandboxie working mode, which separates the communication between the browser and the desktop. Notification can span sandboxie and enable browsers to notify users of messages even in a minimized state.

2. Desktop reminder API

Copy the code

The code is as follows:

Window.webkitNotifications

There are three methods for this API:

Copy the code

The code is as follows:

RequestPermission requests desktop notification

CheckPermission check Desktop Notification license (PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)

CreateNotification create Desktop Notification

3. Desktop notification example

Let's use this desktop to notify API to write a small feature: send a message on the desktop every 20 minutes to remind the user to take a break.

The code is as follows:

Copy the code

The code is as follows:

If (window.webkitNotifications) {

If (window.webkitNotifications.checkPermission () = = 0) {

SetInterval (function () {

Var popup = window.webkitNotifications.createNotification ("avator.jpg", "if you spend a warm reminder:", "you will be blind in front of the computer for a long time, take a rest ~!")

Popup.show ()

}, 1000 * 60 * 20)

} else {

Window.webkitNotifications.requestPermission ()

}

} else {

Alert ('browser does not support desktop notification ~!')

}

And then the desktop will appear in 20 minutes.

Thank you for your reading, the above is the content of "how to use the HTML5 desktop reminder function". After the study of this article, I believe you have a deeper understanding of how to use the HTML5 desktop reminder function, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.