search

Home  >  Article  >  Web Front-end  >  An example code for implementing desktop reminder function using HTML5

An example code for implementing desktop reminder function using HTML5

零下一度
零下一度Original
2017-04-22 14:37:542661browse

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

Desktop Reminder Notification API

window.webkitNotifications

  • ##requestPermission Request communication permission

  • checkPermission Check communication permission

  • createNotification Create communication

  • show                                                                                                                                                                                                               ## To achieve 

    <!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
    • html5 video tutorial
. Many html5 online video tutorials can be watched for free!

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!

Statement：
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
Previous article：Use html5 to implement the dotted line effect codeNext article：Use html5 to implement the dotted line effect code

Related articles

See more