Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > HTML5 Notification (desktop reminder) function usage examples_html5 tutorial skills

HTML5 Notification (desktop reminder) function usage examples_html5 tutorial skills

WBOY
Release： 2016-05-16 15:48:13
Original
2255 people have browsed it

1. Introduction to HTML5 Notification
HTML5 Notification is desktop notification. At present, browsers still operate in a strict sandbox mode, which isolates communication between the browser and the desktop. Notification can span sandboxes, allowing the browser to notify users of messages even when it is minimized.
2. Desktop Reminder API

Copy the code
The code is as follows:
window.webkitNotifications

The API has 3 methods:

Copy code
The code is as follows:
requestPermission request desktop notification
checkPermission check desktop notification permission (PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)
createNotification create desktop notification

3. Desktop Notification Example
Let’s use the desktop notification API to write a small function: 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","Ruhua Warm Reminder: ","Your eyes will go blind if you face the computer for a long time, take a rest~");
popup.show();
},1000 * 60 * 20);

}else{
window.webkitNotifications.requestPermission();
}
}else{
alert('The browser does not support desktop notifications~!');
}

Then the desktop will appear after 20 minutes:

Related labels：
html5 notification
source：php.cn
Previous article：The solution to make Internet Explorer a browser that supports HTML5 (using html5shiv)_html5 tutorial skills Next article：How to make browsers below IE9 compatible with HTML5_html5 tutorial tips
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template