자바스크립트 특정 이벤트가 있을 때 favicon변경과 title 변경을 통한 알림 구현하기

특정 서비스에서 요청을 보내고 다른 탭에서 활동 하고 있을 때, 요청 응답이이 오게 되면 favicon이 변함과 동시에 title도 변하게 됨으로써 요청이 완료 됐는지 확인할 수 있다.

이것을 구현해보겠다.

 

우리가 구현해야할 기능은 다음과 같다.

 

1. 특정 이벤트가 있을 때, favicon과 title을 변경해주는 기능
2. 하지만 내가 이미 페이지를 보고 있다면 favicon과 title을 변경하면 안된다.
3. 알림을 보고 원래 페이지에 접속 했을 때, favicon과 title을 원래의 것으로 변경해주어야 한다.

---

1번 기능부터 구현해보겠다.

<link id="favicon" rel="icon" href="./favicon"/>

favicon에 id를 추가해주고,

function changeFavicon() {
    var iconNew = '../../favicon_red.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "Completed"
}

function changeBaseFavicon() {
    var iconNew = '../../favicon.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "Basic"
}

favicon의 href를 바꿔주는 함수와 그 안에 title도 변경하는 기능을 구현했다. 

위의 함수는 알림 favicon으로 바꿔주는 함수이고,

아래의 함수는 기본 favicon으로 바꿔주는 함수이다.

 

이 함수들을 원하는 이벤트에 넣어주기만 하면 된다.

ajax요청이 완료 되었을 때 라던지... 사용자가 다시 페이지에 들어 왔을 때... 등

 

 

2번 기능을 구현하려면 사용자가 지금 페이지를 보고 있는지 다른 곳을 보고 있는지 판단할 수 있는 것이 필요하다.

자바스크립트 기본 API 중, Page Visibility API에서 필요한 기능을 제공 한다.

이 API에서 document.hidden객체는 페이지가 사용자에게 보이지 않는 것으로 간주되는 상태일 경우 true 를 반환하고, 그렇지 않을 경우 false 를 반환한다.

이것을 바탕으로 코드를 구현해보면,

if (!document.hidden) {
    return;
}
else{
    changeFavicon()
}

※ 만약 사용자가 페이지를 보고 있던 안보고 있던 알림을 보내고 싶다면 (document.hidden) 옵션을 빼주면 된다.

 

 

 

3번 기능을 구현하기 위해서는 위에서 봤던 사용자가 다시 페이지에 들어 왔을 때 라는 이벤트를 받아줄 콜백함수가 필요하다.

 window.addEventListener('focus', function () { //다른 탭을 보고 있다가 요청한 탭으로 돌아 왔을 때의 상황
        changeBaseFavicon()
}, false);

 window.addEventListener('mouseover', function () { //요청한 탭은 보고 있지만, 다른 프로그램을 보고 있을 때의 상황
        changeBaseFavicon()
}, false);

이런식으로 구현해주고, 이때 기본 favicon으로 다시 변경 해주어야 하니 changeBaseFavicon() 함수도 호출해준다.

 

function changeFavicon() {
    var iconNew = '../../favicon2.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "Completed -- View Source"
}

function changeBaseFavicon() {
    var iconNew = '../../favicon.ico';
    document.getElementById('favicon').href = iconNew;
    document.title = "View Source"
}

jQuery.ajax({
        type:'GET',
        url:'www.naver.com',  
        beforeSend: function () {
            console.log("beforeSend");
        },
        complete: function () {
            console.log("Complete");
        },                
        success: function (html) {
            if (!document.hidden) {
                return;
            }
            else{
                changeFavicon();
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
});


 window.addEventListener('focus', function () { //다른 탭을 보고 있다가 요청한 탭으로 돌아 왔을 때의 상황
        changeBaseFavicon()
}, false);

 window.addEventListener('mouseover', function () { //요청한 탭은 보고 있지만, 다른 프로그램을 보고 있을 때의 상황
        changeBaseFavicon()
}, false);

 

전체 코드는 이렇게 되어 있다.

입맛대로 원하는 함수나 이벤트에 쓰면 된다.

 

 

 

http://lab.ejci.net/favico.js/

favico.js

favico.js라고 이것을 제공해주는 라이브러리가 있는데, 이것은 카운팅 기능이나, 원하는 이미지를 넣을 수 있는데 나는 그저 알림만 보내면 되는거라 사용하지않고 직접 구현하였다 이런 기능이 필요한 사람은 한번 사용해봐도 좋겠다.

 

 

 

오디오 재생까지 하고 싶다면 여기를 참고 하자.

2022.04.07 - [자바스크립트] - 자바스크립트에서 오디오 알림 사용하기 (크롬 autoplay 차단 정책 우회 방법)

자바스크립트에서 오디오 알림 사용하기 (크롬 autoplay 차단 정책 우회 방법)