화면 Wake Lock API로 절전모드 해제

Pete LePage

Thomas Steiner

게시일: 2018년 12월 18일

Browser Support

Screen Wake Lock API란 무엇인가요?

배터리 소모를 방지하기 위해 대부분의 기기는 유휴 상태로 두면 빠르게 절전 모드로 전환됩니다. 대부분의 경우 문제가 없지만 일부 애플리케이션은 작업을 완료하기 위해 화면을 절전 모드에서 해제해야 합니다. 예로는 레시피 단계를 보여주는 요리 앱이나 입력에 기기 동작 API를 사용하는 Ball Puzzle과 같은 게임이 있습니다.

화면 Wake Lock API는 기기에서 화면을 어둡게 하거나 잠그지 못하도록 하는 방법을 제공합니다. 이 기능을 사용하면 지금까지 플랫폼별 앱이 필요했던 새로운 환경을 지원할 수 있습니다.

화면 Wake Lock API를 사용하면 해킹이 필요하고 전력을 많이 소모할 수 있는 해결 방법이 필요하지 않습니다. 이 API는 화면을 계속 켜는 데만 제한되고 여러 보안 및 개인 정보 보호 문제가 있었던 이전 API의 단점을 해결합니다.

Screen Wake Lock API의 권장 사용 사례

The Guardian에서 개발한 웹 앱인 RioRun은 완벽한 사용 사례였습니다 (현재는 사용할 수 없음). 이 앱은 2016년 올림픽 마라톤 경로를 따라 리우의 가상 오디오 투어를 제공합니다. 절전 모드 잠금이 없으면 둘러보기가 재생되는 동안 사용자의 화면이 자주 꺼져 사용하기가 어려워집니다.

물론 다른 사용 사례도 많이 있습니다.

케이크를 굽거나 저녁을 요리하는 동안 화면을 켜진 상태로 유지하는 레시피 앱
바코드가 스캔될 때까지 화면을 켜진 상태로 유지하는 탑승권 또는 티켓 앱
화면을 계속 켜두는 키오스크 스타일 앱
프레젠테이션 중에 화면을 켜진 상태로 유지하는 웹 기반 프레젠테이션 앱

화면 Wake Lock API 사용

Screen Wake Lock API는 screen이라는 하나의 절전 모드 해제 잠금 유형만 제공합니다.

`screen` wake lock

screen 절전 모드 해제 잠금은 사용자가 화면에 표시된 정보를 볼 수 있도록 기기의 화면이 꺼지는 것을 방지합니다.

화면 wake lock 가져오기

화면 절전 모드 해제 잠금을 요청하려면 WakeLockSentinel 객체를 반환하는 navigator.wakeLock.request() 메서드를 호출해야 합니다. 원하는 경우 유형(screen)을 매개변수로 전달할 수 있습니다. 브라우저가 다양한 이유 (예: 배터리 잔량 수준이 너무 낮음)로 요청을 거부할 수 있으므로 호출을 try...catch 문으로 래핑하는 것이 좋습니다. 실패한 경우 예외의 메시지에 자세한 내용이 포함됩니다.

화면 wake lock 해제

또한 WakeLockSentinel 객체의 release() 메서드를 호출하여 화면 절전 모드 해제 잠금을 해제하는 방법도 필요합니다. WakeLockSentinel에 대한 참조를 저장하지 않으면 잠금을 수동으로 해제할 방법이 없지만 현재 탭이 표시되지 않으면 잠금이 해제됩니다.

일정 시간이 지난 후 화면 절전 모드를 자동으로 해제하려면 예와 같이 window.setTimeout()를 사용하여 release()를 호출하면 됩니다.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

WakeLockSentinel 객체에는 센티널이 이미 출시되었는지 여부를 나타내는 released이라는 속성이 있습니다. 이 값은 처음에는 false이며 "release" 이벤트가 디스패치되면 true로 변경됩니다. 이 속성을 사용하면 웹 개발자가 수동으로 추적하지 않고도 잠금이 해제된 시점을 알 수 있습니다.

화면 wake lock 수명 주기

화면 절전 모드 해제 잠금 데모를 사용하면 화면 절전 모드 해제가 페이지 표시 상태에 민감하다는 것을 알 수 있습니다. 즉, 탭이나 창을 최소화하거나 화면 wake lock이 활성화된 탭이나 창에서 전환하면 화면 wake lock이 자동으로 해제됩니다.

화면 wake lock을 다시 획득하려면 visibilitychange 이벤트를 수신 대기하고 이벤트가 발생하면 새 화면 wake lock을 요청하세요.

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

시스템 리소스에 미치는 영향 최소화

앱에서 화면 절전 모드 해제 잠금을 사용해야 하나요? 이를 위해 취하는 접근 방식은 앱의 필요에 따라 다릅니다. 하지만 앱이 시스템 리소스에 미치는 영향을 최소화할 수 있는 가능한 한 가장 가벼운 방식을 사용해야 합니다.

앱에 화면 wake lock을 추가하기 전에 다음 대안 중 하나로 사용 사례를 해결할 수 있는지 살펴보세요.

앱이 장기 실행 다운로드를 수행하는 경우 백그라운드 가져오기를 사용하는 것이 좋습니다.
앱이 외부 서버의 데이터를 동기화한다면 백그라운드 동기화를 사용하는 것이 좋습니다.

데모

화면 절전 모드 해제 데모 및 데모 소스를 확인하세요. 탭이나 앱을 전환하면 화면 절전 모드 잠금이 자동으로 해제되는 것을 확인할 수 있습니다.

OS 작업 관리자의 화면 wake lock

운영체제의 작업 관리자를 사용하여 애플리케이션이 컴퓨터의 절전 모드를 방해하는지 확인할 수 있습니다. 동영상에는 Chrome에 시스템을 절전 모드로 전환하지 않는 활성 화면 절전 모드 해제 잠금이 있음을 나타내는 macOS 활동 모니터가 표시됩니다.

의견

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?

버그를 신고합니다. 최대한 자세히 설명해 주시기 바랍니다. 버그를 재현하는 방법을 명확하게 안내하고 구성요소를 Blink>WakeLock로 설정합니다.

리소스

감사의 말씀

작업 관리자 동영상은 Henry Lim이 제공했습니다.