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

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 は、画面をオンに保つことしかできず、セキュリティとプライバシーに関する多くの問題があった古い 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 ウェイクロックは、デバイスの画面がオフになるのを防ぎ、ユーザーが画面に表示された情報を確認できるようにします。

注意: 以前のバージョンの仕様では、アプリが実行を継続できるように、デバイスの CPU がスタンバイモードに入らないようにする追加の system ウェイクロックが許可されていました。現時点では、このタイプは採用しないこととしました。

画面の 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 をアプリに追加する前に、ユースケースが以下の代替ソリューションのいずれかで解決できるかどうかを検討します。

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

デモ

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

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

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

フィードバック

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

API 設計について教えてください

API が想定どおりに動作しない点はありますか？アイデアを実装するために必要なメソッドやプロパティが不足しているか。

Screen Wake Lock API GitHub レポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加してください。

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

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

https://new.crbug.com でバグを報告します。できるだけ詳細な情報を記載し、バグを再現するための簡単な手順を記載して、[コンポーネント] を Blink>WakeLock に設定してください。

API のサポートを表示する

Screen Wake Lock API を使用する予定はありますか？公開サポートは、Chrome チームが機能の優先順位を付けるのに役立ち、他のブラウザベンダーにサポートの重要性を示すことができます。

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

謝辞

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