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

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

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() メソッドを呼び出すことで画面の wake lock を解除する方法も必要です。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 を使用する必要はありますか? アプリのニーズは、デベロッパーが採用するアプローチによって決まります。ただし、アプリにとってできる限り軽量なアプローチを採用し、アプリがシステム リソースに及ぼす影響を最小限に抑える必要があります。

画面の 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 でバグを報告します。できる限り詳細に説明し、バグを再現するための簡単な手順を示して、[Components] を Blink>WakeLock に設定します。Glitch は、すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

Screen Wake Lock API を使用する予定ですか?皆様の公開サポートは、Chrome チームが機能に優先順位を付ける際に役立ちます。また、他のブラウザ ベンダーがサポートすることの重要性についても説明できます。

関連情報

謝辞

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