HTML5를 사용하여 데스크탑 알림 기능을 구현하는 예제 코드-H5 튜토리얼-php.cn

HTML5를 사용하여 데스크탑 알림 기능을 구현하는 예제 코드

零下一度

풀어 주다： 2017-04-22 14:37:54

원래의

2670명이 탐색했습니다.

데스크탑 알림 소개

데스크탑 알림 기능을 사용하면 브라우저가 메시지를 최소화한 상태에서도 사용자에게 알릴 수 있습니다. 이는 WebIM과의 가장 자연스러운 조합입니다. 하지만 현재 데스크톱 알림 기능을 지원하는 유일한 브라우저는 Chrome 5+입니다. 실제 사용 과정에서는 알림 기능이 사용자에게 미치는 영향을 최소화하고 알림 기능 발생도 최소화해야 합니다. 이를 위해서는 다음과 같은 문제 해결이 필요합니다.

1. 수신 여러 메시지를 받을 때 알림이 하나만 표시되는지 확인하세요.
2. 사용자가 IM이 표시되는 페이지에 있으면(페이지가 포커스 상태임) 알림이 표시되지 않습니다.
3. 사용자가 IM으로 여러 탭을 사용하여 여러 페이지를 열 때 한 페이지가 포커스 상태이면 알림이 표시되지 않습니다.
4. 사용자가 알림 플로팅 레이어를 클릭하여 특정 채팅 창을 찾을 수 있도록 하는 방법
5. 또한 해결해야 할 편의성 문제도 있습니다.

Desktop Reminder Notification API

window.webkitNotifications

requestPermission 통신 권한 요청
checkPermission 통신 권한 확인
createNotification 통신 생성
show 알림 표시

코드

<!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>

로그인 후 복사

를 달성하려면 html5를 배워야 하는 학생은 PHP 중국어 웹사이트 html5 비디오 튜토리얼에 주목하세요. 무료로 시청 가능해요!

위 내용은 HTML5를 사용하여 데스크탑 알림 기능을 구현하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!