OS連携権限不要スマホ推奨判定中...

Screen Wake Lock API

画面の自動スリープ（消灯）を抑止できるAPI。レシピ表示や発表タイマーなど画面を点けたままにしたい場面で使う。

1対応判定

ブラウザ	対応バージョン
Chrome	85+
Firefox	126+
Safari	16.4+

備考: 主要3ブラウザ対応

2権限フロー

権限不要このAPI
API呼び出しだけで動く。プロンプトも操作起点の縛りもない
ユーザージェスチャー必須
ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない
権限プロンプトあり
呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ
iOS独自requestPermission
iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

権限プロンプトなし。ただしページが非表示になると自動で解除されるため、visibilitychange での再取得を実装する。

現在の権限状態（navigator.permissions.query）: このブラウザでは取得できません

3ライブデモ: スリープ防止トグルと自動解除の可視化

4コードスニペット

TypeScript（要約版）

let lock: WakeLockSentinel | null = null;

// スリープ防止を取得（ページが可視状態のときのみ成功）
async function acquire() {
  lock = await navigator.wakeLock.request("screen");
  lock.addEventListener("release", () => {
    console.log("解除されました"); // タブ非表示などで自動解除される
  });
}

// タブに戻ってきたら自動で再取得する
document.addEventListener("visibilitychange", async () => {
  if (document.visibilityState === "visible" && shouldKeepAwake) {
    await acquire();
  }
});

// 手動解除
await lock?.release();
lock = null;