このページは Cloud Translation API によって翻訳されました。

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

Screen Wake Lock API は、アプリの実行を続ける必要がある場合に、デバイスが画面を暗くしたりロックしたりしないようにする方法を提供します。

Pete LePage

Thomas Steiner

Screen Wake Lock API とは何ですか？

バッテリーの消耗を避けるため、ほとんどのデバイスはアイドル状態になるとすぐにスリープ状態になります。ほとんどの場合はこれで問題ありませんが、アプリによっては、処理を完了するために画面をスリープ状態から復帰させておく必要があります。たとえば、レシピの手順を表示する料理アプリや、入力にデバイスモーション API を使用するボールパズルなどのゲームなどです。

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

Screen Wake Lock API を使用すると、ハッキングや電力を大量に消費する可能性のある回避策の必要性を低減できます。この API は、常に画面をオンにするだけに制限され、セキュリティとプライバシーに関する多くの問題を抱えていた古い API の欠点に対処します。

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

The Guardian が開発したウェブアプリの RioRun は完璧なユースケースでしたが、現在は利用できなくなりました。2016 年オリンピックマラソンのルートをたどる、リオのバーチャル音声ツアーが表示されます。wake lock を使用しないと、ツアーの再生中にユーザーの画面が頻繁にオフになり、使いにくくなります。

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

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

現在のステータス

ステップ	ステータス
1. 説明を作成	なし
2. 仕様の最初のドラフトを作成する	完了
3.フィードバックを収集して設計を繰り返す	完了
4. オリジントライアル	完了
5. リリース	完了

Screen Wake Lock API の使用

wake lock のタイプ

現在、Screen Wake Lock API が提供できる wake lock のタイプは screen のみです。

`screen` の wake lock

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

注意: 以前のバージョンの仕様では、追加の system wake lock が許可されていました。これにより、デバイスの CPU がスタンバイモードに入ることを防ぎ、アプリの実行を継続できます。現時点では、このタイプの手続きは続行しないことにしました。

画面の wake lock を取得する

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

画面の wake lock の解除

また、WakeLockSentinel オブジェクトの release() メソッドを呼び出すことで、画面の wake lock を解除する方法も必要です。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 が有効なタブやウィンドウから切り替えたりすると、画面の wake lock は自動的に解除されます。

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

アプリで画面の wake lock を使用する必要がありますか？採用するアプローチはアプリのニーズによって異なります。ただし、システムリソースへの影響を最小限に抑えるために、可能な限り最も軽量なアプローチを採用する必要があります。

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

アプリが長時間ダウンロードを実行している場合は、バックグラウンド取得の使用を検討してください。
アプリが外部サーバーからデータを同期している場合は、バックグラウンド同期の使用を検討してください。

デモ

Screen Wake Lock のデモとデモソースをご覧ください。タブやアプリを切り替えると、画面の wake lock が自動的に解除されることに注目してください。

OS タスクマネージャーの Screen Wake ロック

オペレーティングシステムのタスクマネージャーを使用して、アプリがパソコンのスリープを妨げていないかどうかを確認できます。次の動画は macOS の Activity Monitor を示しています。これは、Chrome にアクティブな画面 wake lock があり、システムがスリープ状態になっていることを示しています。

フィードバック

Web Platform Incubator Community Group（WICG）と Chrome チームでは、Screen Wake Lock API に関する皆様のご意見やご感想をお待ちしています。

API の設計についてお聞かせください

API に想定外の動作はありますか？あるいは、アイデアを実装する必要があるメソッドやプロパティが欠落していないか。

Screen Wake Lock API の GitHub リポジトリで仕様に関する問題を提出するか、既存の問題にご意見をお寄せください。

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

Chrome の実装にバグが見つかりましたか？それとも実装が仕様と異なっているか？

https://new.crbug.com でバグを報告します。できる限り詳細を記載し、バグを再現するための簡単な手順を記載して、[Components] を Blink>WakeLock に設定します。Glitch は、再現をすばやく簡単に共有するのに適しています。

API のサポートを表示する

Screen Wake Lock API を使用する予定はありますか？一般公開のサポートにより、Chrome チームが機能に優先順位を付け、他のブラウザベンダーに対してサポートがいかに重要であるかを示します。

API の使用計画を WICG Discourse スレッドで共有する。
ハッシュタグ #WakeLock を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。

謝辞

ヒーロー画像（作成者: Kate Stone Matheson、Unsplash）タスクマネージャーの動画（Henry Lim 提供）