k8o

はじめに

Screen Wake Lock APIが2025年のBaselineに追加されました。 Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。 料理中もずっとレシピを表示しておけるようにするなど、処理を行わず継続的に画面を表示させたいアプリケーションに役立ちます。

Screen Wake Lock APIによるスリープを体験する

Screen Wake Lock APIを使用してスリープのロックを要求するボタンを用意しました。

「スリープ機能をロックする」ボタンを押して、ロックを獲得すると「スリープ機能のロックを解除する」ボタンに切り替わります。

Macをご使用の場合は、標準のアクティビティモニタを開いて「エネルギー」を確認すると、お使いのブラウザの項目の「非スリープ」が「はい」になっていることでロックされていることを確認できます。

ブラウザのタブを切り替えたり、スクリーンを畳んだりすると「非スリープ」が「いいえ」に変わります。

「スリープ機能をロックする」ボタンを押してから別のタブに切り替えて戻ってくると、再び「スリープ機能をロックする」ボタンに戻っていることがわかります。

これは表示中のタブが有効な範囲でのみScreen Wake Lock APIが有効になり、有効範囲からはみ出るとロックが解除されるためです。 この仕様はセキュリティとプライバシーの問題を解決してくれています。

Screen Wake Lock APIの使い方

Screen Wake Lock APIは、navigator.wakeLockから使用します。

navigator.wakeLock.request()メソッドを使用すると、画面のスリープを防ぐことを要求し、WakeLockSentinelインスタンスを返します。 このインスタンスは、ロックを解除するためのrelease()メソッドを持っています。

let wakeLock = null;

// 画面をロックする
wakeLock = await navigator.wakeLock.request('screen');

// 画面のロックを解除する
await wakeLock.release();

navigator.wakeLock.request

navigator.wakeLock.requestは画面のロックを防ぐことを要求するメソッドです。

navigator.wakeLock.requestは第1引数にロックする画面についての種類を任意で渡せます。 執筆時点では、何も渡さない時と機能が変わらないscreenのみがサポートされています。

戻り値はWakeLockSentinelインスタンスです。画面をロックする権限がない時にはNotAllowedErrorをスローします。

WakeLockSentinel

WakeLockSentinelインスタンスはreleasedプロパティとtypeプロパティ、release()メソッドを持ちます。

releasedプロパティはnavigator.wakeLock.requestによるロックが解除されているかどうかを示すプロパティで、typeプロパティはロックの種類を示します。

wakeLock.released; // false
wakeLock.type; // 'screen'

release()メソッドはnavigator.wakeLock.requestによるロックを解除するためのメソッドです。

// 画面のロックを解除する
await wakeLock.release();

WakeLockSentinelインスタンスは、addEventListenerでreleaseを指定して、navigator.wakeLock.requestによるロックが解除されたときに発火するイベントを登録できます。

const wakeLock = await navigator.wakeLock.request('screen');
// タブを切り替えるなど、何かしらの操作によるロックの解除を検知する
wakeLock.addEventListener('release', () => {
  console.log('Wake Lock was released');
});

navigator.wakeLock.requestによるロックが解除された時に発火するだけで、実際のロック状況には依存しないことに注意してください。

おわりに

Baseline 2025に追加された、Screen Wake Lock APIの紹介を行いました。 ページを開いたままデバイスの外側で作業を行うときに悩まされるスリープの問題を解決してくれるAPIです。

ぜひ、Screen Wake Lock APIを使用して、より良い体験を提供できるようにしましょう。