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

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

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

Pete LePage

Thomas Steiner

Screen Wake Lock API とは何ですか？

ほとんどのデバイスはバッテリーの消耗を防ぐため、放置するとすぐにスリープ状態になります。アイドル状態になります。ほとんどの場合はこれで問題ありませんが、アプリケーションによっては、画面がスリープ解除されて作業を完了します。例: 料理アプリレシピやゲームのステップを示すボールパズルのようなゲームでは、入力用の Motion API です。

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

Screen Wake Lock API を使用すると、ハッキングの必要性が軽減され、多くのリソースを消費する回避策です以前の API の欠点を補う画面をオンのままにするだけでなく、セキュリティやプライバシーの問題に迅速に対応できます。

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

RioRun The Guardian が開発したウェブアプリ完璧なユースケースでした（現在は利用できなくなっています）。アプリを使って、2016 年のルートを辿るリオのバーチャルオーディオツアーを案内オリンピックマラソン。 wake lock がなければ、ツアーの再生中に画面が頻繁にオフになることがありましたが、難しくなります

もちろん、他にも多くのユースケースがあります。

画面をオンのまま維持し、ケーキを焼いたり料理したりできるレシピアプリディナー
画面を維持できる搭乗券やチケットアプリオンにし、バーコードがスキャンされるまで
画面を継続的にオンにするキオスクスタイルのアプリ
画面を保持するウェブベースのプレゼンテーションアプリプレゼンテーション中に

で確認できます。

現在のステータス

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

Screen Wake Lock API を使用する

wake lock の種類

現在、Screen Wake Lock API が提供している wake lock は 1 種類（screen）のみです。

`screen` wake lock

screen の wake lock により、デバイスの画面を回転できなくなりますオフにすることで、画面に表示される情報をユーザーが確認できるようになります。

注意: 以前のバージョンの仕様では、追加の system wake lock が許可されていました。デバイスの CPU がスタンバイモードにならないようにして、アプリが動作を継続できるようにします現時点では、この手法は採用しないことに決定しました。

画面の wake lock

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

画面の wake lock の解除

また、画面の wake lock を解除する方法も必要です。画面の 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 最小化されると自動的に解放され、画面の 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 をアプリに追加する前に、ユースケースで次のいずれかの代替ソリューションで解決できます。

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

で確認できます。

デモ

画面の起動ロックのデモとデモのソースをご覧ください。タブを切り替えると画面の wake lock が自動的に解除される点に注目してくださいできます。

OS タスクマネージャーでの画面の起動ロック

オペレーティングシステムのタスクマネージャーを使用すると、アプリケーションがスリープモードから解除できます。以下の動画では、macOS のアクティビティモニターは、システムを起動したままにする有効な画面の wake lock が Chrome に設定されていることを示します。

フィードバック

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 のディスカッションスレッドで共有してください。
ハッシュタグを使用して @ChromiumDev にツイートしてください #WakeLock どこで、どのように使用されているかをお知らせください。

謝辞

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