> 웹 프론트엔드 > JS 튜토리얼 > 사용자가 브라우저 메시지 알림을 받도록 하는 방법은 무엇입니까?

사용자가 브라우저 메시지 알림을 받도록 하는 방법은 무엇입니까?

零下一度
풀어 주다: 2017-06-26 11:46:36
원래의
3707명이 탐색했습니다.

브라우저가 최소화된 경우에도 사용자가 적시에 메시지 알림을 받을 수 있도록 하려면 어떻게 해야 합니까? 이 문제는 webRd에서 정면으로 직면해야 합니다. 이는 대략 두 가지 시나리오로 나눌 수 있습니다. 하나는 데스크톱 알림과 유사하고 다른 하나는 QQ 알림(시스템 작업 표시줄에서 깜박인 후 강조 표시됨)과 유사합니다. 별도로:

데스크톱 알림:

이 H5에는 강력한 API가 있습니다. 예, 알림입니다. 들어본 적이 없나요? 먼저 이에 대해 자세히 알아보겠습니다. 브라우저마다 지원 수준이 다릅니다. 간단히 말해서, 제가 이야기하고 싶은 것은 IE9+를 지원하는 알림 기반의 소규모 클래스 라이브러리입니다. Safari6, Firefox, Chrome ;음, 모두 내 전임자의 제품입니다. 저는 단지 오프라인입니다. 다음은 간단한 데모입니다.

ps: 실제로 연습에 유용한 클래스 라이브러리는 무엇입니까? 클래스 라이브러리를 사용하는 것이 더 좋습니다.

<br>
로그인 후 복사
function _Notification(title,option){
    var Notification = window.Notification || window.mozNotification || window.webkitNotification;
    Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
    function creatNotification(title, option){
       var instance = new Notification(title, option);
        instance.onclick = function () {
            console.log('onclick');
        };
        instance.onerror = function () {
            console.log('onerror');
        };
        instance.onshow = function () {
            console.log('onshow');
        };
        instance.onclose = function () {
            console.log("close")
        }
    }
    function requestPermission(title, option){
        Notification.requestPermission(function(status) {
            status === "granted"?creatNotification(title, option):failNotification(title);
        });
    }
    function failNotification(title){
        var timer;
        return function(timer){
            var index = 0;
            clearInterval(timer);
            timer = setInterval(function() {
                if(index%2) {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【   】'+ title;
                }else {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;
                }
                index++;
                if(index > 20) {
                    clearInterval(timer);
                }
            }, 500);
        }(timer);
    }
}
로그인 후 복사
 <br>
로그인 후 복사

작업 표시줄 알림:

이것은 실제로 문제입니다. 작성자는 아직 이를 연구하지 않았지만 window.open과 같은 팝업 창이 실행됩니다. 깜박이는 알림이지만 사용자가 팝업 창을 금지하는 상황은 제출 || 하이퍼링크(a) || 브라우저 버블링을 사용하여 대부분의 차단 상황을 해결할 수 있습니다. 작성자가 원하는 것은 프롬프트 내용이 항상 팝업 창에 표시되기 때문입니다. 사용자가 혼동하기 쉽습니다. 프롬프트가 있을 때 제목 표시줄이 여러 개 표시되는 것 같습니다. 오버플로우도 가능하지만, 뇌가 침수되지 않는 한 잊어버리세요... 전문가의 지도를 기대합니다.;

위 내용은 사용자가 브라우저 메시지 알림을 받도록 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿