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

Screen Wake Lock API는 애플리케이션을 계속 실행해야 할 때 기기의 화면이 어두워지거나 잠기는 것을 방지할 수 있는 방법을 제공합니다.

Pete LePage

Thomas Steiner

성공: Google의 여러 기능 중 하나인 Screen Wake Lock API는 기능 프로젝트와 Chrome 84에서 출시되었습니다.

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

대부분의 기기는 배터리 소모를 방지하기 위해 기기를 떠날 때 빠르게 절전 모드로 전환됩니다. 있습니다. 대부분의 경우에는 문제가 없지만 일부 애플리케이션은 화면을 켜두는 게 아니라 작업을 완료할 수 있습니다. 요리 앱 등을 예로 들 수 있습니다. 레시피 또는 게임의 단계를 보여주는 예를 들면 기기를 사용하는 Ball Puzzle 입력용 모션 API입니다.

Screen Wake Lock API는 기기가 어두워지는 것을 방지하는 방법을 제공합니다. 화면을 잠글 수 있습니다. 이 기능은 지금까지 플랫폼별 앱이 필요했던 새로운 경험을 가능하게 합니다.

Screen Wake Lock API는 해킹의 필요성을 줄이고 해결 방법을 찾을 수 있습니다. 이전 API의 단점을 해결합니다. 그것은 단지 화면을 켜두는 것으로 제한되어 있었고 보안 및 개인 정보 보호 문제를 해결하는 데 도움이 됩니다.

Screen Wake Lock API의 추천 사용 사례

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

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

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

성공: Screen Wake Lock API를 구현한 후, 미국 유명 요리 사이트인 Betty Crocker는 사용자의 구매 의도 지표가 300% 증가했습니다. 자세한 내용은 🐫 Betty Crocker 우수사례를 참고하세요.

현재 상태

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

참고: Intel의 직원, 특히 Mrunal Kapade와 Raphael Kubo에게 큰 감사를 드립니다. da Costa의 지원을 받았습니다. Chrome은 Chromium 프로젝트를 진행하기 위해 함께 노력하는 커밋 일부 Chromium 커밋한 사용자는 Google 직원이며 이러한 참여자는 특별한 혜택을 받을 자격이 있습니다. 좋은 하루 되세요!

화면 깨우기 잠금 API 사용

wake lock 유형

Screen Wake Lock API는 현재 한 가지 유형의 wake lock(screen)만 제공합니다.

screen wake lock

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

주의: 이전 버전의 사양에서는 추가적인 system wake lock이 허용되었습니다. 기기의 CPU가 대기 모드로 전환되지 않도록 하여 제한하기만 하면 됩니다 현재로서는 이러한 유형의 조치를 취하지 않기로 결정했습니다.

화면 wake lock 가져오기

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

화면 wake lock 해제

또한 WakeLockSentinel 객체의 release() 메서드 WakeLockSentinel 참조를 저장하지 않으면 을 눌러 잠금을 수동으로 해제할 수 있지만, 현재 탭이 보이지 않게 되면 해제됩니다.

화면 wake lock을 자동으로 해제하려는 경우 일정 기간이 지난 후 아래 예와 같이 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을 다시 획득하려면 다음 단계를 따르세요. visibilitychange 이벤트를 수신 대기합니다. 그런 다음 새로운 화면 wake lock을 요청할 수 있습니다.

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

앱에서 화면 wake lock을 사용해야 하나요? 취할 수 있는 접근 방식은 앱의 요구사항에 따라 다릅니다. 그럼에도 불구하고 가능한 가장 가벼운 접근 방식을 사용하여 시스템 리소스에 미치는 영향을 최소화합니다

앱에 화면 wake lock을 추가하기 전에 사용 사례가 다음과 같을 수 있는지 고려하세요. 다음 대안 솔루션 중 하나로 해결할 수 있습니다.

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고: 대부분의 다른 강력한 웹 API와 마찬가지로 Screen Wake Lock API는 (HTTPS를 통해 게재되는 경우).

데모

화면 깨우기 잠금 데모 및 데모 소스를 확인하세요. 탭을 전환할 때 화면 wake lock이 자동으로 해제되는 방식 확인 실행할 수 있습니다

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

운영체제의 작업 관리자를 사용하여 애플리케이션이 있습니다. 아래 동영상은 macOS 활동 모니터링 이는 Chrome에 시스템 절전 모드를 유지하는 활성 화면 wake lock이 있음을 나타냅니다.

의견

웹 플랫폼 인큐베이터 커뮤니티 그룹 (WICG) Chrome 팀은 여러분의 화면 깨우기 잠금 API를 통해 생각과 경험을 나누세요.

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

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요?

• Screen Wake Lock API GitHub 저장소에서 사양 문제를 신고합니다. 기존 문제에 내 생각을 추가할 수 있습니다

구현 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 어떻게 해야 할까요?

• https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 버그 재현을 위한 간단한 안내를 제공하고, 구성요소를 Blink>WakeLock로 설정합니다. Glitch가 잘 작동합니다. 쉽고 빠르게 재현할 수 있습니다.

API 지원 표시

화면 깨우기 잠금 API를 사용할 계획이신가요? 여러분의 공적 후원은 Chrome팀은 기능의 우선순위를 정하고 다른 브라우저 공급업체에 지원하는 것이 매우 중요합니다

• WICG 담화 대화목록에서 API 사용 계획을 공유합니다.
• 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #WakeLock 어디서 어떻게 사용하는지 Google에 알려주세요.

유용한 링크

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

감사의 말씀

히어로 이미지 제공 케이트 스톤 매시슨(Unsplash) 작업 관리자 동영상 제공: 헨리 림