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

Screen Wake Lock API는 애플리케이션을 계속 실행해야 할 때 기기가 화면을 어둡게 하거나 잠그지 않도록 하는 방법을 제공합니다.

Pete LePage

Thomas Steiner

성공: Google의 기능 프로젝트에 포함된 Screen Wake Lock API가 Chrome 84에서 출시되었습니다.

화면 깨우기 잠금 API란 무엇인가요?

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

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

Screen Wake Lock API를 사용하면 해킹이 필요하지 않으며 전력 소모가 심할 수 있는 해결 방법을 사용할 필요가 없습니다. 이전 API의 단점은 화면을 켜두는 것에만 국한되어 있고 여러 보안 및 개인 정보 보호 문제가 있었습니다.

Screen Wake Lock API의 추천 사용 사례

The Guardian에서 개발한 웹 앱인 RioRun은 완벽한 사용 사례였습니다 (더 이상 사용할 수 없음). 이 앱은 2016년 올림픽 마라톤 경로를 따라 리우데자네이루의 가상 오디오 투어를 안내합니다. wake lock이 없으면 둘러보기가 재생되는 동안 사용자의 화면이 자주 꺼지므로 사용하기가 어렵습니다.

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

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

성공: 미국의 주요 요리 사이트인 Betty Crocker는 Screen Wake Lock API를 구현한 후 사용자의 구매 의도 지표가 300% 증가했습니다. 🍰 Betty Crocker 우수사례에서 자세히 알아보세요.

현재 상태

단계	상태
1. 설명 동영상 만들기	해당 사항 없음
2. 사양의 초안 작성	완전함
3. 의견 수집 및 디자인 반복	완전함
4. 오리진 트라이얼	완료
5. 실행	완전함

참고: 이 API를 구현해 주신 Intel의 직원, 특히 Mrunal Kapade와 Raphael Kubo da Costa에게 진심으로 감사드립니다. Chrome은 Chromium 프로젝트를 발전시키기 위해 함께 노력하는 커밋터 커뮤니티에 의존합니다. 모든 Chromium 커밋자가 Google 직원은 아니므로 이러한 참여자는 특별한 인정을 받을 자격이 있습니다.

화면 깨우기 잠금 API 사용

wake lock 유형

Screen Wake Lock API는 현재 screen이라는 하나의 유형의 웨이크 락만 제공합니다.

screen wake lock

screen wake lock은 사용자가 화면에 표시된 정보를 볼 수 있도록 기기의 화면이 꺼지지 않도록 합니다.

주의: 이전 버전의 사양에서는 앱이 계속 실행될 수 있도록 기기의 CPU가 대기 모드로 전환되지 않도록 하는 추가 system wake lock을 허용했습니다. 현재로서는 이 유형을 진행하지 않기로 결정했습니다.

화면 wake lock 가져오기

화면 깨우기 잠금을 요청하려면 WakeLockSentinel 객체를 반환하는 navigator.wakeLock.request() 메서드를 호출해야 합니다. 이 메서드에 원하는 wake lock 유형을 매개변수로 전달합니다. 이 유형은 현재 'screen'로만 제한되므로 선택사항입니다. 브라우저는 다양한 이유로 요청을 거부할 수 있으므로 (예: 배터리 충전 수준이 너무 낮음) 호출을 try…catch 문에 래핑하는 것이 좋습니다. 실패하면 예외 메시지에 자세한 내용이 포함됩니다.

화면 wake lock 해제

또한 화면 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로 변경됩니다. 이 속성을 사용하면 웹 개발자가 직접 추적하지 않아도 잠금이 해제된 시점을 알 수 있습니다. Chrome 87부터 사용할 수 있습니다.

화면 wake lock 수명 주기

화면 wake lock 데모를 실행해 보면 화면 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을 추가하기 전에 사용 사례를 다음 대안 중 하나로 해결할 수 있는지 고려하세요.

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

참고: 다른 대부분의 강력한 웹 API와 마찬가지로 Screen Wake Lock API는 HTTPS를 통해 제공되는 경우에만 사용할 수 있습니다.

데모

Screen Wake Lock 데모 및 데모 소스를 확인하세요. 탭이나 앱을 전환할 때 화면 wake lock이 자동으로 해제되는 방식을 확인하세요.

OS 작업 관리자의 화면 깨우기 잠금

운영체제의 작업 관리자를 사용하여 애플리케이션이 컴퓨터의 절전 모드를 방해하는지 확인할 수 있습니다. 아래 동영상은 Chrome에 시스템을 깨어 있게 유지하는 활성 화면 깨우기 잠금이 있음을 나타내는 macOS Activity Monitor를 보여줍니다.

의견

웹 플랫폼 인큐베이터 커뮤니티 그룹 (WICG) 및 Chrome팀은 Screen Wake Lock API에 대한 의견과 경험을 듣고자 합니다.

API 설계에 대해 알려주세요.

API에 예상대로 작동하지 않는 문제가 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요?

• Screen Wake Lock API GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 의견을 추가하세요.

구현 문제 신고

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

• https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보를 포함하고 버그 재현을 위한 간단한 안내를 제공하고 구성요소를 Blink>WakeLock로 설정합니다. Glitch는 빠르고 간편한 재현을 공유하는 데 적합합니다.

API 지원 표시

Screen Wake Lock API를 사용할 계획이신가요? 공개적으로 지원하면 Chrome팀에서 기능의 우선순위를 지정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

• WICG 담화 대화목록에서 API 사용 계획을 공유합니다.
• #WakeLock 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 사용 위치와 사용 방법을 알려주세요.

유용한 링크

• 사양 후보 추천 | 편집자 초안
• 화면 깨우기 잠금 데모 | 화면 깨우기 잠금 데모 소스
• 버그 추적
• ChromeStatus.com 항목
• Wake Lock API 실험
• Blink 구성요소: Blink>WakeLock

감사의 말씀

케이트 스톤 매시슨의 히어로 이미지(Unsplash) 작업 관리자 동영상은 헨리 림님이 제공해 주셨습니다.