살아남기: Screen Wake Lock API
6105 단어 htmlapicssjavascript
Screen Wake Lock API은 정확히 그 기능을 수행하지만 현재로서는 Chrome에서만 가능합니다.
이를 테스트하기 위해 MacBook에서 Chrome을 사용했습니다.
먼저
Turn display off after를 1 min로 설정했습니다.
그런 다음 Wake Lock API를 켜고 끄는 체크박스를 추가했습니다. 체크박스는 숨겨져 있고 레이블은 아이콘으로 표시됩니다. 오른쪽 상단 모서리에 줄이 그어진 회색 눈입니다.
그런 다음 누르면 아이콘이 열린 녹색 눈으로 바뀝니다.
Screen Wake Lock를 전환하기 위한 JavaScript 코드는 매우 간단합니다.const wakeLockToggle = document.querySelector('[data-wake-lock] > input');
if (wakeLockToggle && ('wakeLock' in navigator)) {
let wakeLock = null;
const wakeLockEnable = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
}
wakeLockToggle.addEventListener('click', () => {
if (wakeLockToggle.checked) {
wakeLockEnable();
}
else {
wakeLock.release()
.then(() => {
wakeLock = null;
});
}
})
}
다음으로 MacBook을 열어두고 아무것도 건드리지 않았습니다.
예상대로 1분 후 화면이 어두워졌습니다. 그런 다음
Screen Wake Lock를 켰고 3분 후에도 화면이 어두워지지 않았습니다. 만세!데모
안타깝게도 Codepen은 기능 정책으로 인해
Screen Wake Lock API가 로드되지 않는데 데모here!를 업로드했습니다.보너스: 구조화된 마크업
Google의 리치 스니펫을 사용하는 것은 SEO 보너스이므로 데모 레시피에 추가했습니다. GoogleRich Result Testing Tool을 사용하여 Google이 보는 것을 미리 볼 수 있습니다.
--
오른쪽에서 왼쪽으로
나는
CSS Logical Properties , border-block-start-width 및 padding-inline-start 를 포함한 일부 스타일에 margin-block-end 를 사용했습니다.데모 마크업을 검사하는 경우 문서 상단에서
ltr를 rtl로 변경합니다.<html lang="en-US" dir="ltr">
Screen Wake Lock API를 포용하는 레시피가 있는 사이트만 권장할 수 있습니다.읽어 주셔서 감사합니다!
Reference
이 문제에 관하여(살아남기: Screen Wake Lock API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/madsstoumann/staying-alive-the-screen-wake-lock-api-31fh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
