백그라운드 탭에서도 작동하는 타이머 (왜 어떤 것은 안 되는지)
스로틀링 문제
브라우저는 백그라운드 탭의 자바스크립트를 스로틀링해 전력을 아끼고, 브라우저마다 그 기준이 다릅니다. 애니메이션 프레임은 거의 즉시 멈추므로 시각 루프 위에 만든 타이머는 어긋나거나 얼어붙습니다. 벽시계 시간 기반의 타이머, 즉 카운트다운을 센 초수가 아니라 실제 현재 시각에서 계산하는 방식은 탭이 스로틀링되도 정확합니다. 브라우저가 여전히 주기적으로 깨워 확인하기 때문입니다.
백그라운드에서 살아남는 것
setInterval 기반 타이머는 백그라운드 탭에서 초당 한 번 이하로 둔해지지만 그래도 계속 발동합니다. 그래서 잘 만든 타이머는 멈추지 않고 숫자의 부드러운 애니메이션만 덜 부드러워질 뿐입니다. 오디오 알림이 또 다른 위험입니다. 일부 브라우저는 탭에서 한 번이라도 사용자 상호작용이 없으면 방문하지 않은 백그라운드 탭의 소리를 막습니다. 클릭해서 시작한 타이머 페이지는 상호작용을 했으니 알림이 울리지만, 스스로 시작하는 타이머는 그렇게 운이 좋지 않습니다.
알림은 예비 수단
가장 견고한 브라우저 타이머는 페이지 안 알림과 시스템 알림을 함께 띄웁니다. 브라우저 창이 최소화돼 있거나 다른 애플리케이션에 있어도 알림이 닿습니다. 알림 권한은 처음 사용할 때 요청됩니다. 긴 카운트다운(회의나 세탁기처럼 한 시간 이상)에는 정밀함보다 이것이 더 중요하고, 짧은 인터벌(요리, 운동 라운드)에서는 소리 알림이 일을 하고 알림은 편의 수단입니다.
휴대폰은 반반
모바일 브라우저는 데스크톱보다 백그라운드 탭을 더 세게 스로틀링하고, 아예 화면을 잠그는 것도 있어 웹 타이머가 멈추거나 죽을 수 있습니다. 화면이 켜져 있고 탭이 보이는 동안에는 휴대폰에서도 웹 타이머는 잘 됩니다. 다만 주머니 속 휴대폰을 재는 도구로는 맞지 않습니다. 주머니 시나리오에는 네이티브 앱이나 물리 타이머가 이깁니다. 카운트다운에 의존하기 전에 내가 어느 시나리오에 있는지 먼저 아세요.
타이머를 한 번 시험하기
새 타이머를 1분으로 맞추고 탭을 전환한 뒤 기다리세요. 1분이 지나자마자 몇 초 안에 알림이 울면 스로틀링을 견디니 믿어도 됩니다. 늦게 울거나 아예 안 울면, 파스타가 넘쳐오르기 전에 배울 것을 2분 만에 배운 셈입니다. 저희 타이머는 데스크톱 브라우저에서 이 테스트를 통과하고 백그라운드 탭에서도 알립니다. 정확히 그래서 만들었습니다.
도구
무료 온라인 타이머는 벽시계 시간 기반이고, 데스크톱에서 백그라운드 탭에서도 소리로 울립니다. 위의 1분 테스트로 한 번 확인하고 볼륨을 올려두면 웹페이지가 아니라 가전제품처럼 행동하는 카운트다운이 됩니다.