[JS] 브라우저창 포커스 여부 체크하기

 

포트폴리오겸 개인 소개를 담은 웹사이트를 만들고 있습니다. 처음 방문 했을 때 최적화 또는 좋은 사용자 경험을 위해 유저가 현재 어떤 상태에 놓여져 있는지 확인을 해야하는 경우가 있는데요.

 

첫 페이지가 로딩되면 애니메이션 효과가 실행되는데, 브라우저에서 Blur 상태가 되면 이벤트를 멈추고 다시 focus 상태가 되면 애니메이션이 동작해야 합니다. 이것은 window.addEventListener()를 통해 쉽게 구현되지만, 문제는 blur 상태로 페이지가 로딩되는 경우입니다. 아래의 순서로 버그가 발생되는데요.

 

버그 발생 순서

---

1. blur 상태로 웹사이트 로딩이 완료되고 애니메이션 실행
2. 유저가 브라우저를 focus 하게 되면 애니메이션 효과가 중복으로 적용

첫 로딩에 이벤트와 Focus 이벤트가 발생되면 또 중복으로 적용되는 상황입니다.이렇게 버그가 일어나는 상황을 순서대로 정리하고보니 처음 떠오른 해결 방법 외에 하나 더 찾아냈습니다.

 

1. blur 상태로 로딩이 완료될 경우 애니메이션 실행 막기(처음 떠오른 방법)
2. 브라우저를 focus할 때 애니메이션이 실행하고 있을 경우 실행 막기

 

첫 단추를 잘 끼워야 겠다는 마인드로 첫 번째 방법을 적용시켰습니다.

Document.hasFocus()

---

const isFocus:boolean = document.hasFocus()

console.log(isFocus) // true => focus 상태
                     // false => blur 상태

 

document 자체에 focus 상태인지 확인해주고 애니메이션을 실행 시켜주면 정상적으로 작동합니다.

 

참고

---

Document.hasFocus() - Web API | MDN