Home > Article > Web Front-end > An example code for implementing desktop reminder function using HTML5
Introduction to Desktop Reminder
The desktop notification function allows the browser to notify users of messages even when it is minimized. This is the most natural combination with WebIM. However, the only browser that currently supports the Desktop Notification function is Chrome 5+. In the actual use process, the interference of the notification function to the user should be minimized and the occurrence of the notification function should be minimized. This requires solving the following problems:
1. Receive When receiving multiple messages, ensure that only one notification appears;
2. When the user is on the page where IM appears (the page is in Focus state), no notification will appear;
3. When the user uses multiple tabs to open multiple pages with IM, as long as one page is in the Focus state, no notification will appear;
4. How Let users click on the notification floating layer to locate the specific chat window
5. In addition, a convenience issue also needs to be solved
window.webkitNotifications
<!DOCTYPE HTML> <html> <head <meta charset="gbk"> <title>Creating OS notifications in HTML5</title> </head> <body> <input type="button" value="验证授权" onclick="init();" /> <input type="button" value="弹出消息" onclick="notify();" /> <script type="text/javascript"> const miao = 5; function init() { if (window.webkitNotifications) { window.webkitNotifications.requestPermission(); } } function notify() { var icon = "logo.png"; var title = "Hello World"; var body = "You Are My World (5秒后自动关闭)"; if (window.webkitNotifications) { if (window.webkitNotifications.checkPermission() == 0) { var popup = window.webkitNotifications.createNotification(icon, title, body); popup.ondisplay = function(event) { setTimeout(function() { event.currentTarget.cancel(); }, miao * 1000); } popup.show(); popup.show(); } else { window.webkitNotifications.requestPermission(); return; } } } </script> </body> </html>, students who need to learn html5 please pay attention to the php Chinese website
The above is the detailed content of An example code for implementing desktop reminder function using HTML5. For more information, please follow other related articles on the PHP Chinese website!