Screen Wake Lock API で画面をロックしない

Screen Wake Lock API を使用すると、アプリを継続的に実行する必要がある場合にデバイスの画面が暗くなったり、ロックされたりすることを防ぐことができます。

Pete LePage
Thomas Steiner

Screen Wake Lock API とは何ですか？

電池の消耗を防ぐため、ほとんどのデバイスはアイドル状態になるとすぐにスリープ状態になります。ほとんどの場合、これは問題ありませんが、一部のアプリでは、処理を完了するために画面をスリープ状態にしない必要があります。たとえば、レシピの手順を示す料理アプリや、デバイスのモーション API を入力に使用する Ball Puzzle などのゲームがあります。

Screen Wake Lock API を使用すると、デバイスの画面が暗くなったり、ロックされたりすることを防ぐことができます。この機能により、これまでプラットフォーム固有のアプリが必要だった新しいエクスペリエンスを実現できます。

Screen Wake Lock API を使用すると、ハッキングや電力消費の多い回避策の必要性が軽減されます。これは、画面のオン保持のみに限定され、セキュリティとプライバシーに関する多くの問題があった古い API の欠点を解消します。

Screen Wake Lock API の推奨ユースケース

The Guardian が開発したウェブアプリ RioRun は、まさにそのユースケースでした（現在は利用できません）。このアプリでは、2016 年オリンピックのマラソンのルートをたどりながら、リオのバーチャル音声ツアーを楽しむことができます。ウェイクロックがないと、ツアーの再生中にユーザーの画面が頻繁にオフになり、使いづらくなります。

他にもさまざまなユースケースがあります。

  • ケーキを焼いたり夕食を作ったりする間、画面をオンに保つレシピ アプリ
  • バーコードがスキャンされるまで画面をオンに保つ搭乗券アプリやチケット アプリ
  • 画面を常にオンにするキオスク スタイルのアプリ
  • プレゼンテーション中に画面をオンに保つウェブベースのプレゼンテーション アプリ

現在のステータス

ステップ ステータス
1. 説明を作成する なし
2. 仕様の最初の下書きを作成する 完了
3. フィードバックを収集してデザインを反復する 完了
4. オリジン トライアル 完了
5. リリース 完了

Screen Wake Lock API を使用する

wake lock の種類

現在、Screen Wake Lock API で提供されているウェイクロックは screen の 1 種類のみです。

screen wake lock

screen ウェイクロックは、デバイスの画面がオフにならないようにし、ユーザーが画面に表示される情報を確認できるようにします。

画面の wake lock を取得する

画面ウェイクロックをリクエストするには、WakeLockSentinel オブジェクトを返す navigator.wakeLock.request() メソッドを呼び出す必要があります。このメソッドには、目的のウェイクロック タイプをパラメータとして渡します。現在は 'screen' のみに制限されているため、省略可能です。ブラウザはさまざまな理由（バッテリー残量が低すぎるなど）でリクエストを拒否する可能性があるため、呼び出しを try…catch ステートメントでラップすることをおすすめします。失敗した場合、例外のメッセージに詳細が含まれます。

画面の wake lock を解除する

また、画面ウェイクロックを解除する方法も必要です。これは、WakeLockSentinel オブジェクトの release() メソッドを呼び出すことで行います。WakeLockSentinel への参照を保存しない場合、ロックを手動で解除することはできませんが、現在のタブが非表示になると解除されます。

一定の時間が経過した後に画面ウェイクロックを自動的に解除するには、次の例に示すように、window.setTimeout() を使用して release() を呼び出します。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

WakeLockSentinel オブジェクトには、センチネルがすでにリリースされているかどうかを示す released というプロパティがあります。値は最初は false で、"release" イベントがディスパッチされると true に変わります。このプロパティは、ロックが解除されたタイミングをウェブ デベロッパーが把握できるようにし、手動で追跡する必要がなくなります。この機能は Chrome 87 以降で利用できます。

画面の wake lock のライフサイクル

画面ウェイクロックのデモを試すと、画面ウェイクロックはページの可視性に敏感であることがわかります。つまり、タブまたはウィンドウを最小化するか、画面の wake lock が有効になっているタブまたはウィンドウから切り替えると、画面の wake lock は自動的に解除されます。

画面の wake lock を再取得するには、visibilitychange イベントをリッスンし、イベントが発生したときに新しい画面の wake lock をリクエストします。

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

システム リソースへの影響を最小限に抑える

アプリで画面ウェイクロックを使用するべきか？ アプリのニーズは、デベロッパーが採用するアプローチによって決まります。ただし、アプリにとってできる限り軽量なアプローチを採用し、アプリがシステム リソースに及ぼす影響を最小限に抑える必要があります。

画面の wake lock をアプリに追加する前に、ユースケースを次のいずれかの代替ソリューションで解決できるかどうかを検討してください。

デモ

Screen Wake Lock のデモとデモソースをご覧ください。タブまたはアプリを切り替えると、画面のウェイクロックが自動的に解除されます。

OS タスク マネージャーの画面の wake lock

オペレーティング システムのタスク マネージャーを使用して、アプリケーションがパソコンのスリープ状態を妨げているかどうかを確認できます。次の動画は、macOS のアクティビティ モニタで、Chrome がシステムをスリープ状態にしないアクティブな画面ウェイクロックを持っていることを示しています。

フィードバック

Web Platform Incubator Community Group（WICG）と Chrome チームは、Screen Wake Lock API に関するご意見やご感想をお聞かせください。

API 設計について

API が想定どおりに機能していない点はありますか？または、アイデアを実装するために必要なメソッドやプロパティが不足している場合はどうすればよいですか？

実装に関する問題を報告する

Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？

  • https://new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、バグの再現手順を簡単に説明します。[コンポーネント] を Blink>WakeLock に設定します。Glitch は、迅速で簡単な再現を共有するのに適しています。

API のサポートを表示する

Screen Wake Lock API を使用する予定ですか？公開サポートは、Chrome チームが機能を優先付けするうえで役立ち、他のブラウザ ベンダーに、その機能のサポートがどれほど重要であるかを示します。

  • WICG Discourse スレッドで、API の使用方法をお知らせください。
  • ハッシュタグ #WakeLock を使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。

関連情報

謝辞

ヒーロー画像: Kate Stone Matheson、Unsplash。タスク マネージャーの動画は Henry Lim 提供。