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 を取得する

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

画面の wake lock を解除する

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

一定期間経過した後に画面の wake lock を自動的に解除するには、次の例に示すように 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 のデモとデモソースをご覧ください。タブやアプリを切り替えると、画面の 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 でバグを報告します。できる限り詳細に説明し、バグを再現するための簡単な手順を示して、[Components] を Blink>WakeLock に設定します。Glitch は、迅速かつ簡単に再現を共有するのに適しています。

API のサポートを表示する

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

関連情報

謝辞

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