1. このページの目的
Screen Wake Lock API を使って、スマートフォンのディスプレイをスリープさせないようにする。
2. 操作
経過時間： 0 [秒]
Screen Wake Lock status:
説明
- 例えば、以下の条件を考える。
- 本ページの上のところで、5分後に Screen Wake Lock が止まるようにしている。
- スマートフォンの設定で、最後の操作から 2分後にディスプレイがスリープするように設定している。
- この場合、Screen Wake Lock をスタートさせてから、5分(=300秒) + 2分(=120秒) = 420秒後に ディスプレイがスリープするはず。
- 実際に試したところ、この通りの結果となった (Android 9, Chrome 84.0.4147.125)。
3. コード
Stay awake with the Screen Wake Lock API のコードを引用する（コメントを追加した）。本ページもこのコードを利用している。
JavaScript
// WakeLockSentinel object を格納する変数
let wakeLock = null;
// screen wake lock をリクエストするための関数
const requestWakeLock = async () => {
// ブラウザは Screen Wake Lock を拒否することがあるので、
// try...catch を使い拒否された場合の処理も記述する
try {
wakeLock = await navigator.wakeLock.request('screen');
// Screen Wake Lock がリリースされたときの処理
wakeLock.addEventListener('release', () => {
console.log('Screen Wake Lock was released');
});
console.log('Screen Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// screen wake lock をリクエストする
await requestWakeLock();
// X分後に Screen Wake Lock をリリースする（止める）
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 1000*60*seconds);
詳しくは本ページのソースコードを見てください。
4. メモ
- ウィンドウを最小化したり、タブを切り替えたりすると、Screen Wake Lock がリリースされてしまう。
- 目的のタブが表示されたら、すぐに Screen Wake Lock を再開したい場合は、以下のコードを使う。
- （Stay awake with the Screen Wake Lock API にサンプルコードがある）
document.addEventListener('visibilitychange', () => {})