집 > 기사 > 웹 프론트엔드 > HTML5를 사용하여 데스크탑 알림 기능을 구현하는 예제 코드

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

零下一度원래의: 2017-04-22 14:37:542621검색

데스크탑 알림 소개

데스크탑 알림 기능을 사용하면 브라우저가 메시지를 최소화한 상태에서도 사용자에게 알릴 수 있습니다. 이는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：html5를 사용하여 점선 효과 코드 구현다음 기사：html5를 사용하여 점선 효과 코드 구현