Page Visibility API, 유저가 페이지를 보고 있는지 알려줘!

Page Visibility API

0. 들어가기에 앞서…

• 우리 서비스는 소켓 통신이 많이 발생한다. 그렇다보니, 유저가 다른 탭을 보고 있거나 페이지를 최소화했을 때는 소켓 통신을 비활성화 해야한다. 그런데 유저가 서비스 페이지를 보고 있지 않은지 어떻게 알 수 있을까?
• 이번 시간엔 사용자가 웹 페이지를 보고 있는지를 알 수 있는 Page Visibility API에 대해 알아보았다!

😎 Page Visibility API를 알게 되면 아래와 같은 처리를 할 수 있게 된다.
1. 유저가 페이지를 보고 있지 않을 때 불필요한 소켓 통신 중단 가능
2. 유저가 페이지를 보고 있지 않을 때 video를 멈추고, 탭으로 돌아왔을 때 다시 재생 가능
3. 유저가 페이지를 보고 있지 않을 때 사운드를 줄이고, 탭으로 돌아왔을 때 사운드 회복 가능

1. Page Visibility API란?

• Page Visibility API는 유저가 페이지를 보고 있는지를 이벤트와 속성값으로 제공한다.
• 예를 들어, 유저가 페이지를 최소화했거나 다른 탭을 보고 있는지를 감지할 수 있는 것이다.

1) 속성

(1) document.hidden

• 이 속성은 페이지가 유저에게 보이지 않을 때 true를 반환하고, 보일 때 false를 반환한다.

document.addEventListener("visibilitychange", () => {
  console.log(document.hidden);  // true or false
});

• 아래 예시는 다른 탭을 보고 왔을 때, 상태 변경이 일어나 document.hidden이 false로 출력된 모습이다. (예시 코드 보기)

• 단, 사전 렌더링(prerender)일 때는 사용자에게 페이지가 보여지더라도 document.hidden이 true일 수 있다. (ex. 새 브라우저 탭을 열고 URL을 붙여넣어 해당 URL로 이동할 때)

(2) document.visibilityState

• 이 속성은 페이지가 유저에게 보여지는 상태를 문자열로 반환한다.

리턴값	설명
visible	- 유저가 페이지의 콘텐츠를 보고 있는 상태
hidden	- 유저가 페이지의 콘텐츠를 보고 있지 않은 상태  ex) 백그라운드 탭일 때, 창 최소화했을 때, OS 잠금 모드일 때

document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState); // visible or hidden
});

• 아래 예시는 다른 탭을 보고 왔을 때, 상태 변경이 일어나 document.visibilityState이 visible로 출력된 모습이다.(예시 코드 보기)

2) 이벤트

(1) visibilitychange event

• 페이지의 콘텐츠가 숨겨지거나 표시될 때 이벤트가 발생한다.

addEventListener("visibilitychange", (event) => {});

onvisibilitychange = (event) => {};

3) 사용 예시 보기

• visibilitychange와 document.hidden를 사용해, 페이지가 보여질 때는 오디오를 플레이하고 그렇지 않을 때는 오디오를 중단해보았다.

const audio = document.querySelector("audio");

document.addEventListener("visibilitychange", () => {
  if (document.hidden) audio.pause();
  else audio.play();
});

• 아래 gif에서 보다시피 탭을 전환하거나 페이지를 최소화했을 때 오디오가 중단되고 다시 페이지가 보여질 때오디오가 재생되는 걸 볼 수 있다. (예시 코드 보기)

2. 마치며…

• 이번 시간에는 유저가 페이지를 보고 있는지를 관찰할 수 있는 Page Visibility API에 대해 알아보았다.
• Page Visibility API는 웹 페이지의 보이는 상태를 감지할 수 있는데, 불필요한 소켓 통신, 비디오 재생 등을 막는데 사용할 수 있다.
• 특히 소켓 통신의 경우, 클라이언트와 서버 간에 많은 소켓 통신을 막을 수 있는 장점이 있다.
• 만약 서비스에서 불필요한 트래픽을 줄이고 싶다면, Page Visibility API를 사용해봐도 좋을 듯 하다.