브라우저 tab에서 notification사용하기

요즘과 같은 비동기, 실시간 웹에서는 웹에서 업데이트된 소식을 사용자에게 바로바로 전달해야 되는 경우가 많다. 예를 들어 페이스북에 새로운 알림이 있다면 사용자가 페이스북을 보고 있지 않더라도 알림이 왔다고 알려줘야 한다. 이럴때 사용 하는 방법 중 Title을 이용한 notification이 있다.

시간 관계상 바로 full source code 올림

var orgnTitle = "U And I Talk";
var count = 0;
var onFocus = true;
var title = document.title;
function increaseNoti() {
	if(onFocus) return;
	count++;
	var newTitle = '(' + count + ') ' + title;
	document.title = newTitle;
}
function resetNoti() {
	count = 0;
	document.title = orgnTitle;
}

/***********************이건 테스트용************************/
function newUpdate() {
	update = setInterval(increaseNoti, 2000); // 실제로 코드를 돌려보면 사용자가 안 보고 있을때만 숫자가 증가한다.
}
newUpdate();
/***********************이건 테스트용************************/


$(window).on("blur focus", function(e) {
	var prevType = $(this).data("prevType");

	if (prevType != e.type) {   //  reduce double fire issues
		switch (e.type) {
			case "blur":
				onFocus = false;
				break;
			case "focus":
				onFocus = true;
				resetNoti();
				break;
		}
	}

	$(this).data("prevType", e.type);
})