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

Pete LePage

Thomas Steiner

公開日: 2018 年 12 月 18 日

Browser Support

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 年のオリンピックマラソンのルートに沿って、リオのバーチャルオーディオツアーを体験できます。ウェイクロックがないと、ツアーの再生中にユーザーの画面が頻繁にオフになり、使いにくくなります。

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

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

Screen Wake Lock API を使用する

Screen Wake Lock API は、screen という 1 種類のウェイクロックのみを提供します。

`screen` wake lock

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

画面の 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 に変わります。このプロパティを使用すると、ウェブデベロッパーは手動で追跡しなくても、ロックが解除されたタイミングを把握できます。

画面の 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 がシステムを起動状態に保つアクティブな画面ウェイクロックを保持していることが示されています。

フィードバック

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

バグを報告します。できる限り詳細にご記入ください。バグを再現するための明確な手順を提供し、[コンポーネント] を Blink>WakeLock に設定します。

リソース

仕様候補の推奨事項 | エディタのドラフト
Screen Wake Lock のデモ | Screen Wake Lock のデモのソース
トラッキングバグ
ChromeStatus.com のエントリ
Wake Lock API を試す
Blink コンポーネント: Blink>WakeLock

謝辞

タスクマネージャーの動画は Henry Lim 氏のご提供です。