画面のスリープを防ぐScreen Wake Lock API
2025年のBaselineにScreen Wake Lock APIが追加されました。Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。この機能により処理が行われていない状態でも継続的に画面を表示する体験を実現できるようになりました。
はじめに
Screen Wake Lock APIが2025年のBaselineに追加されました。 Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。 料理中もずっとレシピを表示しておけるようにするなど、処理を行わず継続的に画面を表示させたいアプリケーションに役立ちます。
Screen Wake Lock 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は第一引数にロックする画面についの種類を渡します。この引数は省略可能で、執筆現在は画面のスリープを制御するscreenのみがサポートされています。
また、navigator.wakeLock.requestはロックする権限がない時などにNotAllowedErrorをスローします。
WakeLockSentinel
WakeLockSentinelオブジェクトはreleasedプロパティとtypeプロパティ、release()メソッド、releaseイベントを持ちます。
releasedプロパティはロックが解除されているかどうかを示すプロパティで、typeプロパティはロックの種類を示します。
wakeLock.released; // false
wakeLock.type; // 'screen'release()メソッドはロックを解除するためのメソッドです。
// 画面のロックを解除する
await wakeLock.release();releaseイベントはロックが解除されたときに発火します。
// タブを切り替えるなど、何かしらの操作によるロックの解除を検知する
navigator.wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});おわりに
2025年のBaseLineに追加された、Screen Wake Lock APIの紹介を行いました。ページを開いたままデバイスの外側で作業を行うときに悩まされるスリープの問題を解決してくれるAPIです。 ぜひ、Screen Wake Lock APIを使用して、より良い体験を提供できるようにしましょう。