Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

사용자가 웹페이지에 다시 돌아왔을 때 이벤트 발생시키기

페이스북을 보통 웹페이지에서 이용하는 편인데 페이스북을 이용하면서 특이하게 느끼는 부분이 있었습니다. 일반적으로 웹페이지에 노티피케이션을 하기위해서 탭브라우저가 일반화된 요즘은 다른 페이지를 이용하는 동안 polling으로 받아온 새로운 내용들을 알려주기 위해서 제목에 표시를 해주거나 페이지 상단에 새로운 내용이 업데이트되었다는 것을 표시해 놓는 것이 일반적입니다. 소스를 다 열어보진 않아도 보통 pollling을 사용하기 때문에 다른 페이지를 보고있는 동안 계속 페이지는 갱신이 되는 구조입니다.

하지만 페이스북은 제가 다른 탭을 보다가 페이스북에 돌아오는 순간 새로운 내용들이 업데이트되는 것이 꽤 인상적이었습니다. 바로 업데이트 되는 것으로 보아 polling으로 미리 데이터는 땡겨온 다음에 사용자가 페이스북 탭을 다시 보는 순간 화면에 업데이트만 해주는 구조로 추측됩니다. 프론트앤드 개발을 전문적으로 하지는 않지만 이런 이벤트에 대해서는 알고 있지 못했기 때문에 상당히 특이하게 보았고 지난 주말에 해당 부분을 테스트 해보았습니다. (사실 이 생각을 한지는 꽤 되었는데 귀찮아서 놔두고 있다가 nephilim님의 도움으로 찾아봤습니다.)


window.addEventListener('focus', function() {
    console.log('사용자가 웹페이지에 돌아왔습니다.')
}, false);

서론은 길었습니다만 코드는 아주 간단합니다. window에 focus를 등록해주면 사용자가 브라우저의 다른 탭을 사용하다가 해당 탭에 돌아왔을때나 다른 프로그램을 사용하다가 브라우저로 돌아왔을때 모두 focus이벤트가 잘 발생하고 있습니다.(물론 위 코드는 focus를 건다는 것만 보여주려고 표준에 맞춰 작성한 것이기 때문에 IE에서는 동작하지 않습니다.)
2011/06/10 01:30 2011/06/10 01:30